首页 > 代码库 > 7、网页制作Dreamweaver（悬浮动态分层导航）
7、网页制作Dreamweaver（悬浮动态分层导航）
悬浮动态分层导航的制作：
1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）
1 <script language="javascript" type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.4.2.min.js"></script>
2、插入div
1 <div id="apDiv1" ><img src=http://www.mamicode.com/"img/logo.bmp" /> 2 <nav id="menu"> 3 <div class="daohang" style="background-image:url(img/bg.png)"> 4 <a href=http://www.mamicode.com/"index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5 <a href=http://www.mamicode.com/"about us.html" target="_blank"><div> 6 关于我们</div></a> 7 8 <a href=http://www.mamicode.com/"services.html" target="_blank"><div>咖啡文化</div></a> 9 10 <a href=http://www.mamicode.com/"price list.html" target="_blank"><div>价格清单</div></a>11 12 <a href=http://www.mamicode.com/"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=http://www.mamicode.com/"<--MENU-->" /></div>18 <div style="background-image:url(img/bg.png)"><a href=http://www.mamicode.com/"#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>
3、CSS样式表的制作
1 /*————导航—————*/ 2 #apDiv1 { 3 position:fixed; 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;13 /*border:solid #965D28;*/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>
至此，导航制作结束~
7、网页制作Dreamweaver（悬浮动态分层导航）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。