课堂笔记----悬浮动态分层导航

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

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

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

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

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