制作一个导航菜单

09/0121

分类: HTML&CSS&JS 标签: wordpress主题, 导航菜单Hooken

一.最简单的导航菜单
1.菜单原理
在制作之前，先介绍制作菜单的原理如下。
制作导航菜单其实很简单，使用的元素是ul和li元素。菜单中，每个导航元素都是放在li元素中，设定li的宽度和高度，用浮动属性使li横向排列。然后对菜单进行修饰。（如果要使用背景图片的方式显示菜单前的修饰图片，应该控制内容部分的位置，让背景图片显示出来。）

2.编写代码
结构部分

<div id="menu">
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>

表现部分

* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#fff;
}
#menu {
}
#nav {
margin:50px;
list-style:none;
}
#nav li {
float:left; /*用浮动属性使li横向排列*/
width:100px;
height:50px;
}
#nav li a { /*制作链接样式*/
display:block;
padding:10px 20px;
background:#999;
border:1px solid #000;
color:#fff;
text-decoration:none;
text-align:center;
}
#nav li a:hover { /*制作鼠标悬停效果*/
color:#000;
background:#FFF;
}

效果如图所示:

二.复杂导航菜单：下拉菜单的制作
1. 下拉菜单的原理
所使用的原理很简单。首先，使用绝对定位，将需要隐藏的菜单移出屏幕的可视范围。然后，在鼠标悬停时调用新的定位值，使原来移出的部分再显示出来。
因为要调用不同的样式文件，所以要使用到脚本语言完成这部分功能。也就是说，首先定义好显示和隐藏的样式，然后使用脚本，实现不同样式的调用。
2. 结构部分
菜单结构部分，主要是显示的菜单和隐藏的菜单组成。采用嵌套ul的方法，将需要隐藏的菜单，制作成主要导航菜单的子菜单。其具体的结构代码如下：

<div class="main">
<div class="menucontent">
<ul id="nav">
<li style="left: auto;"><a href="#">导航栏目1</a>
<ul>
<li><a href="#">子栏目1</a></li>
<li><a href="#">子栏目2</a></li>
<li><a href="#">子栏目3</a></li>
</ul>
</li>
<li><a href="#">导航栏目2</a>
<ul>
<li><a href="#">子栏目1</a></li>
<li><a href="#">子栏目2</a></li>
<li><a href="#">子栏目3</a></li>
</ul>
</li>
<li><a href="#">导航栏目3</a>
<ul>
<li><a href="#">子栏目1</a></li>
<li><a href="#">子栏目2</a></li>
<li><a href="#">子栏目3</a></li>
</ul>
</li>
</ul>
</div>
</div>

3 表现部分
3.1编写主导航部分的样式

.main{
width:450px;
height:auto !important;
height:auto;
border:1px solid #666666;
margin:100px auto;
background:#ffffff;
padding:20px;
font-size:18px;
font-family:"宋体";}
.menucontent{
width:310px;
margin:0 auto;}
ul{
margin:0;
padding:0;}
#nav{
border-right:1px solid #666666;
height:24px;
width:303px;}
#nav li{
float:left;
width:100px;
height:24px;
list-style:none;
border-top:1px solid #666666;/*这里只定义3个方向的边框目的是配合ul的边框制作矩形框*/
border-left:1px solid #666666;
border-bottom:1px solid #666666;
background:#cccccc;}
#nav a {
display: block; /*用来显示链接的背景*/
font-size:12px;
text-align:center;
line-height:24px;
color:#000000;
font-weight:bold;
text-decoration:none;}

说明:样式中，首先定义menucontent的属性，使其水平居中显示。然后定义ul的补白和边界值为0，目的是取消ul元素的默认的边界和补白。接下来，定义nav的宽度含有的每个li的宽度和边线，目的是分清每个导航元素。最后定义菜单的链接属性，替代原来的默认显示方式（注意其中定义的display属性，目的是制作鼠标悬停时的背景转换效果）。
3.2编写子栏目的样式

#nav li ul li{
width:99px;
height:24px;
background:#eeeeee;
border-bottom:#cccccc 1px solid;
border-left:#cccccc 1px solid;
border-right:#cccccc 1px solid;}
#nav li ul li a{
font-size:12px;
color:#333333;}
#nav li ul li a:hover{
background:#333333;
color:#ffffff;}

3.3隐藏子栏目

#nav li ul {
position: absolute;
left: -999px;
}

说明：使用决定定位属性将子栏目隐藏。因为要隐藏子栏目，所以隐藏的属性应该添加在子栏目所在的ul里。
该样式用一个很大的负值，将子菜单移出屏幕的显示范围。
3.4制作显示效果的样式

#nav li.sfhover ul {
left: auto}

说明:制作隐藏效果后，还要做一种能够显示子菜单的样式，目的是当某个子菜单调用该样式时，可以显示出菜单的内容。
当某个子菜单使用该样式后，则使用auto值代替原有的-999像素，这样原本隐藏的菜单就会重新出现了。
4:行为层：使用的脚本代码
link_down.js

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

说明:该导航中调用不同样式的脚本。这段脚本的主要作用是，使用循环语句找到页面代码中的第一层分类菜单所在的位置。然后当鼠标悬停状态时，在li中添加一个名称为sfHover的类。由于此时的li使用了sfHover类，根据不同选择符之间的关系，子菜单将使用类sfHover中定义的属性。所以隐藏的菜单就重新出现了。
最后的效果如图所示: