悬浮动态分层导航 - kelly凯丽

1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）

1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2、插入div（这里我的div是带有锚点效果的，已经用红色标出锚点，定位到了网页顶端，也就是<body>开始的地方写了一句<a name="top">top</a>，如果不给name一个初始值，就写上a href="#"同样有回到顶端的效果）

 1 <div id="apDiv1" ><img src="img/logo.bmp" /> 2   <nav id="menu"> 3   <div class="daohang" style="background-image:url(img/bg.png)"> 4       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5       <a href="about us.html" target="_blank"><div> 6       关于我们</div></a>       7        8       <a href="services.html" target="_blank"><div>咖啡文化</div></a> 9       10       <a href="price list.html" target="_blank"><div>价格清单</div></a>11        12       <a href="contact.html" target="_blank"><div>联系我们</div></a>13       14   </div>15   </nav>16   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">17   <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>18   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>

3、CSS样式表的制作(一些属性设置换上你们需要的属性就可以了)

 1 /*————导航—————*/ 2 #apDiv1 { 3     position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果

 4     left: auto; 5     top: auto; 6     bottom:auto; 7     width: 237px; 8     height:auto; 9     z-index: 2;10     margin-top:-8px;11     margin-left:40px;12     text-align:center;14     font-size:16px;15     font-family:"黑体";16     color:#965D28;17     background-image:url(../img/bg.png);18     }19 #menu{20     display:none;21 }22 .daohang div{23     height: 30px;24     z-index: 2;25     margin:0 auto;26     text-align:center;27     padding-top:5px;28     overflow:hidden;29     padding-top:10px;30     color:965D28;31 }32 .daohang div:hover{33     height:30px;34     z-index:2;35     margin:0 auto;36     background-image:url(../img/menu-hover.png);37     text-align:center;38     overflow:visible;39     color:#fff;40 }41 42 .daohang li{43     margin-left:237px;44     list-style-type:none;45     background-color:#D3A23A;46     width:160px;47     line-height:30px;48     color:#422B1D;49     position:relative;50     top:-40px;51     background-image:url(../img/bg.jpg);52     border:solid thin;53     border-color:#965D28;54     z-index:1;55     }56 .daohang li:hover{57     margin-left:237px;58     list-style-type:none;59     background-color:#D3A23A;60     width:160px;61     line-height:50px;62     color:#fff;63     position:relative;64     top:-40px;65     border:solid thin;66     border-color:#965D28;67     background-image:url(../img/bg.png);68     z-index:1;69     }70 .daohang a:link,a:visited{71     text-decoration:none;72     color:#965D28;73 }74 .daohang a:hover{75     text-decoration:none;76     color:#fff;77 }

4、鼠标点击事件的触发（写在body里面）

1 <script>2 　　function menuvisible() {3 　　$("nav").toggle();/*开关*/4 　　}    5 </script>


代码示例：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 <title>无标题文档</title>
  7 <style>
  8 #apDiv1 {    
  9       position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
 10       left: auto;      
 11       top: auto;     
 12       bottom:auto;      
 13       width: 237px;      
 14       height:auto;     
 15       z-index: 2;    
 16       margin-top:-8px;     
 17       margin-left:40px;     
 18       text-align:center;     
 19       font-size:16px;     
 20       font-family:"黑体";     
 21       color:#965D28;     
 22       background-image:url(../img/bg.png);     
 23 } 
 24 #menu{     
 25     display:none; 
 26 }
 27 .daohang div{     
 28     height: 30px;     
 29     z-index: 2;    
 30     margin:0 auto;     
 31     text-align:center;     
 32     padding-top:5px;     
 33     overflow:hidden;    
 34     padding-top:10px;     
 35     color:965D28; 
 36 } 
 37 .daohang div:hover{    
 38     height:30px;     
 39     z-index:2;     
 40     margin:0 auto;     
 41     background-image:url(../img/menu-hover.png);    
 42     text-align:center;    
 43     overflow:visible;     
 44     color:#fff; 
 45 }
 46 .daohang li{    
 47     margin-left:237px;     
 48     list-style-type:none;    
 49     background-color:#D3A23A;     
 50     width:160px;     
 51     line-height:30px;     
 52     color:#422B1D;     
 53     position:relative;     
 54     top:-40px;    
 55     background-image:url(../img/bg.jpg);     
 56     border:solid thin;     
 57     border-color:#965D28;     
 58     z-index:1;    
 59 }
 60 .daohang li:hover{     
 61     margin-left:237px;     
 62     list-style-type:none;    
 63     background-color:#D3A23A;    
 64     width:160px;    
 65     line-height:50px;     
 66     color:#fff;    
 67     position:relative;    
 68     top:-40px;    
 69     border:solid thin;     
 70     border-color:#965D28;     
 71     background-image:url(../img/bg.png);     
 72     z-index:1;    
 73 }
 74 .daohang a:link,a:visited{    
 75     text-decoration:none;     
 76     color:#965D28; }
 77 .daohang a:hover{     
 78     text-decoration:none;     
 79     color:#fff; 
 80 }
 81 
 82 </style>
 83 
 84 
 85 
 86 </head>
 87 
 88 <body>
 89 <script> 　　
 90 function menuvisible() 
 91 { 　　
 92     $("nav").slideToggle(1500);/*开关*/　　
 93 }    
 94 </script>
 95 
 96 <div id="apDiv1" >
 97 <img src="qwe.png" width=150 />   
 98 <nav id="menu">  
 99 <div class="daohang" style=" background-color:#630">       
100 <a href="index.html">
101 <div style=" background-color:#FC0; color:#fff">首页
102 </div>
103 </a>       
104 <a href="about us.html" target="_blank"><div>关于我们
105 </div>
106 </a>       
107       
108 <a href="services.html" target="_blank"><div>咖啡文化
109 </div></a>      
110 <a href="price list.html" target="_blank"><div>价格清单
111 </div>
112 </a>     
113 <a href="contact.html" target="_blank"><div>联系我们
114 </div></a> 
115 </div>   
116 </nav>  
117 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">  
118 <input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
119 </div> 
120 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
121 </a>
122 </div> 
123 </div>
124 <br />
125 <br />
126 <br />
127 <br />
128 <br />
129 <br />
130 <br />
131 <br />
132 <br />
133 <br />
134 <br />
135 <br />
136 <br />
137 <br />
138 <br />
139 <br />
140 <br />
141 <br />
142 <br />
143 <br />
144 <br />
145 <br />
146 <br />
147 <br />
148 <br />
149 <br />
150 <br />
151 <br />
152 <br />
153 <br />
154 <br />
155 <br />
156 <br />
157 <br />
158 <br />
159 <br />
160 <br />
161 <br />
162 <br />
163 <br />
164 <br />
165 <br />
166 <br />
167 <br />
168 <br />
169 <br />
170 <br />
171 <br />
172 <br />
173 <br />
174 <br />
175 <br />
176 <br />
177 <br />
178 <br />
179 <br />
180 <br />
181 <br />
182 <br />
183 <br />
184 <br />
185 <br />
186 <br />
187 <br />
188 咖啡
189 
190 </body>
191 </html>

效果图：

posted on 2016-05-13 14:59 kelly凯丽阅读(233) 评论(0) 收藏举报

刷新页面返回顶部