首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:30:07
字体:
来源:转载
供稿:网友

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

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

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基础:安装、语法)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表