春风博客

春天里，百花香...

导航

<2008年9月>
日一二三四五六
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

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

无序列表在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);
}

效果示例：




本文中涉及的全部代码可以从如下地址下载，此压缩文档是一个Eclipse3.2工程Tomcat项目，导入后即能运行：
http://www.blogjava.net/Files/sitinspring/CssSecondSample20080927113520.rar

posted on 2008-09-27 11:57 sitinspring 阅读(5728) 评论(4)  编辑  收藏 所属分类: HTML,CSS&JS

评论

# re: 使用无序列表制作导航菜单[未登录] 2008-09-27 12:51 jack

很好懂，谢谢  回复  更多评论   

# re: 使用无序列表制作导航菜单 2008-09-27 13:11 sclsch

顶你，向你学习div+css技术。  回复  更多评论   

# re: 使用无序列表制作导航菜单 2008-09-28 14:39 lsq

放到Firefox就变形了  回复  更多评论   

# re: 使用无序列表制作导航菜单 2008-09-28 14:59 sitinspring

@lsq

应该是IE和FIreFox对盒模型的不同解释导致了问题。  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.