使用CSS开发时髦的导航栏(二)

转载 2007年09月18日 12:13:00
原作者: Rachel Andrew    译者: 子非鱼 (Blog)    发表时间:昨天 10:40:17    原文链接
删除:
把眉批拖到这里
我能够使用CSS和列表创造有子菜单的导航栏吗?
有时候我们需要超过一级的导航栏 可是在CSS里面用样式化的列表能够创建多级导航栏吗?
 
解决方案
在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 哪怕浏览器不支持CSS
为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色、边界和链接属性:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
 
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
 
增加这些以后的显示效果如图4
navigation_css-list-subnav.png
4. 包含子菜单的导航栏
讨论
嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分,在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何CSS样式,列表的结构依然清晰且容易理解,就象你在图5看到的一样。
navigation_sense-without-css.png
5:没有使用样式,包含子菜单的导航栏
下面是我们用来在主要项目的li元素里面标记这个简单的嵌套列表的HTML代码:
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
HTML,如果简单的使用本文前面的CSS,不做任何修改的话,导航菜单的显示将如图6。由于li元素继承主菜单的样式,子列表将呈现出主导航栏一样的样式。
navigation_sublist-mainnav-styles.png
6:采用默认样式表子菜单导航栏
为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果,让我们增加一个样式规则:
#navigation ul ul {
margin-left: 12px;
}
这个规则将缩进嵌套列表,让它在主菜单的右边界对齐,象图7显示的这样:
navigation_indent-subnav.png
7:带有缩进规则的导航栏
最后让我们给嵌套表里面的lia元素增加一些简单的样式以便完善效果:
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
 

相关文章推荐

纯css使用transform实现同心圆导航栏菜单

最近遇到客户来了一个我没遇到过的需求。那就是制作一个同心圆菜单栏。因为公司没有其他人指导我,所以我自己在网上搜索了很久,最后是根据(http://www.w3cplus.com/css3/buildi...

使用html和css制作水平导航栏nav

使用html和css制作水平导航栏nav的方法及其效果: 1、li设置float:left; (1)代码片段:... *{ margin:0; ...
  • aSuncat
  • aSuncat
  • 2016年07月09日 13:48
  • 6817

DIV+CSS实操二:经管系网页添加导航栏和友情链接栏

接着DIV+CSS实操一:经管系网页总体模块布局这篇博客继续,实现添加导航栏和友情链接栏,导航栏的下拉 菜单我们后续会加上。          先来HTML代码: 经管系 Dream...

看书《DIV+CSS商业案例与网页布局开发精讲》_制作站点导航栏_随手笔记

一、文本导航栏 (1)文本导航栏的效果主要由背景图片和文字的链接效果来控制,   文本导航栏一般使用标签或直接使用标签控制 (2)[1]  标签是列表标签,它是将整个导航栏作为一个列表进...

eclipse导航栏背景颜色修改css

  • 2017年11月02日 15:29
  • 3KB
  • 下载

div+css制作的几款好看的导航栏

  • 2012年11月07日 14:00
  • 5KB
  • 下载

js + css实现左侧悬浮导航栏

浮在页面上的导航菜单
  • oscar999
  • oscar999
  • 2011年03月08日 13:42
  • 10403

纯css导航栏,适合新手

  • 2017年07月08日 23:14
  • 1KB
  • 下载

CSS+JS简洁实用的滑动导航栏

  • 2010年06月22日 11:25
  • 4KB
  • 下载

教程:MediaWiki修改右侧导航栏.修改全局css.js以及增加编辑页面格式模板选择功能.

***问题一:如何修改MediaWiki右侧的导航栏呢? ~在wiki的搜索栏里键入“MediaWiki:Sidebar”后搜索。 即可开始您的修改qwq! ***问...
  • MoeDisk
  • MoeDisk
  • 2016年10月07日 12:00
  • 1530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用CSS开发时髦的导航栏(二)
举报原因:
原因补充:

(最多只允许输入30个字)