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

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

1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可)

 <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="#"同样有回到顶端的效果)

 <div id="apDiv1" ><img src="img/logo.bmp" />
<nav id="menu">
<div class="daohang" style="background-image:url(img/bg.png)">
<a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a>
<a href="about us.html" target="_blank"><div>
关于我们</div></a> <a href="services.html" target="_blank"><div>咖啡文化</div></a> <a href="price list.html" target="_blank"><div>价格清单</div></a> <a href="contact.html" target="_blank"><div>联系我们</div></a> </div>
</nav>
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
<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>
<div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>
</div>

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

 /*————导航—————*/
#apDiv1 {
position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果
left: auto;
top: auto;
bottom:auto;
width: 237px;
height:auto;
z-index: ;
margin-top:-8px;
margin-left:40px;
text-align:center;
font-size:16px;
font-family:"黑体";
color:#965D28;
background-image:url(../img/bg.png);
}
#menu{
display:none;
}
.daohang div{
height: 30px;
z-index: ;
margin: auto;
text-align:center;
padding-top:5px;
overflow:hidden;
padding-top:10px;
color:965D28;
}
.daohang div:hover{
height:30px;
z-index:;
margin: auto;
background-image:url(../img/menu-hover.png);
text-align:center;
overflow:visible;
color:#fff;
} .daohang li{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:30px;
color:#422B1D;
position:relative;
top:-40px;
background-image:url(../img/bg.jpg);
border:solid thin;
border-color:#965D28;
z-index:;
}
.daohang li:hover{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:50px;
color:#fff;
position:relative;
top:-40px;
border:solid thin;
border-color:#965D28;
background-image:url(../img/bg.png);
z-index:;
}
.daohang a:link,a:visited{
text-decoration:none;
color:#965D28;
}
.daohang a:hover{
text-decoration:none;
color:#fff;
}

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

 <script>
  function menuvisible() {
  $("nav").toggle();/*开关*/
  }
</script>

至此,导航制作结束~

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

上一篇:手机网页制作教程META标签你知道多少?【转+加】


下一篇:Oracle User Management FAQ翻译及学习笔记