征服 风云天下服务端:使用无序列表制作导航菜单

来源：百度文库 编辑：偶看新闻 时间：2024/05/05 06:23:07

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

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

无序列表的原始形式


      
  • 菜单001

    •   
  • 菜单002

    •   
  • 菜单003

    •   
  • 菜单004

    •   
  • 菜单005

    •   
  • 菜单006

    •   
  • 菜单007

    •   
  • 菜单008

原始效果：


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

由上图可见，无序列表原始的形式是难以作为菜单的，如果想拿无序列表作为菜单，要修改的地方可能有：
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);
}

效果示例：




本文中涉及的全部代码可以从如下地址下载，此压缩文档是一个Eclipse3.2工程Tomcat项目，导入后即能运行：
http://www.blogjava.net/Files/sitinspring/CssSecondSample20080927113520.rar
制作网页中有哪些导航菜单？ Dreamweaver制作网页时，使用flash菜单作为导航条，如何链接到本地站点的其它页面 找用Dreamweaver制作导航下拉菜单的视频教程？ 如何制作多安装软件 的列表菜单？ 网页导航菜单 从fireworks中制作的导航条中作的下拉菜单如何导出？？？ 列表菜单关联 怎么样制作导航？ 如何制作导航 导航的制作 如何去掉WORD中文件菜单中的最近使用过的文件列表 网页 列表/菜单 问题 列表菜单关联的问题 月经无序和大量使用止血药有关吗 哪里有交如何使用CSS制作网页最上方导航条的视频？ 求教网页左隐导航菜单问题?? 求普通的下拉菜单导航条！！！！！ 关于loanMovie与导航菜单的问题 怎么设置QQ空间个性导航菜单 flash导航菜单改动的问题 哪里有asp导航菜单下载 如何制作列表 创力CMS导航菜单怎么没了下拉菜单？ +++ 求光盘导航制作软件 +++