7、网页制作Dreamweaver(悬浮动态分层导航)

时间:2021-08-31 09:05:48

悬浮动态分层导航的制作:

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>

至此,导航制作结束~

需要查看jQuery的具体用法请参见:8、网页制作Dreamweaver(jQuery基础:安装、语法)