转：使用无需列表制作导航菜单。

 

使用无序列表制作导航菜单

无序列表在Web页面中的用途

除了Div，Table，Form外，我们最常用的Html元素之一就是无序列表ul，使用它通常可以实现以下形式：
1.实现文本数据列表，这是无序列表的原始意图。
2.嵌套使用无序列表，以实现树状结构。
3.修改无序列表的样式，将它作为菜单使用。相对于用表格制作的菜单项，它修改起来比较方便，样式也很容易设置。
第三点就是本文的主要议题。

无序列表的原始形式

<ul>
<li><a href='#'>菜单001</a></li>
<li><a href='#'>菜单002</a></li>
<li><a href='#'>菜单003</a></li>
<li><a href='#'>菜单004</a></li>
<li><a href='#'>菜单005</a></li>
<li><a href='#'>菜单006</a></li>
<li><a href='#'>菜单007</a></li>
<li><a href='#'>菜单008</a></li>
</ul>

原始效果：


要将无序列表作为菜单使用需要修改的地方

由上图可见，无序列表原始的形式是难以作为菜单的，如果想拿无序列表作为菜单，要修改的地方可能有：
1.列表项的圆点一定要去掉，否则影响视觉效果。
2.要能将纵向列表变成横向，因为许多菜单是横向的。
3.如果有必要，需要取消列表项的下划线。

对UL进行样式设置以取消圆点

要取消无序列表左边的圆点，我们可以使用CSS对UL进行样式设置，将其list-style-type属性设置为none就可以了。示例代码如下：

/**//* menuDiv里的横向菜单*/
#menuDiv ul{}{
margin:0;
padding:0;
list-style-type:none;
}
/**//* 类名为sideNav的div中的纵向菜单*/
.sideNav ul{}{
margin:0;
padding:0;
list-style-type:none;
}

 

让子项浮动以修改列表项的方向

如果要将本为纵向的菜单改为横向，可以将子项li的属性float值改为left或是right，这样子项就变成了向左浮动或是向右浮动，从纵向形式变成了横向形式。示例如下：

/**//* menuDiv里的横向菜单中的子项*/
#menuDiv li{}{
float:left;
font-size: 16px;
color:#c49a8e;

margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;

padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;

border-right: 1px solid #000000;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
border-bottom: 0px solid #000000;

background:url(../img/fadedarktdbg.jpg);
}

修改链接的text-decoration属性以取消链接文字的下划线
代码如下：

#menuDiv li a{}{
color:#c49a8e;
text-decoration: none;
background:url(../img/fadedarktdbg.jpg);
}

增加链接项的动态背景效果

使用伪类选择器，我们还可以给菜单项加上动态效果，当鼠标掠过时能动态变化菜单的背景色，这样能使当前菜单项更醒目。通过修改子项链接在平时和鼠标掠过时给予不同的背景图片就能办到。

代码示例如下：

/**//* 子项链接为淡黑背景*/
#menuDiv li a{}{
color:#c49a8e;
text-decoration: none;
background:url(../img/fadedarktdbg.jpg);
}
/**//* 子项链接有鼠标掠过时变成为深黑背景*/
#menuDiv li a:hover {}{
color:#c49a8e;
background:url(../img/darktdbg.jpg);
}

效果示例：