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; width: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; width: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>
时间： 2024-10-11 08:51:16