我能够使用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。
图4. 包含子菜单的导航栏
讨论
嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分,在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何CSS样式,列表的结构依然清晰且容易理解,就象你在图5看到的一样。
图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元素继承主菜单的样式,子列表将呈现出主导航栏一样的样式。
图6:采用默认样式表子菜单导航栏
为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果,让我们增加一个样式规则:
#navigation ul ul {
margin-left: 12px;
}
这个规则将缩进嵌套列表,让它在主菜单的右边界对齐,象图7显示的这样:
图7:带有缩进规则的导航栏
最后让我们给嵌套表里面的li和a元素增加一些简单的样式以便完善效果:
#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+div+js实现简单导航栏开发;该页面简单明了,通俗易懂
我能够使用CSS和列表创造有子菜单的导航栏吗?有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗?
除非限制你自己只做单个页面的网站,否则你都需要导航栏。事实上,导航栏是任何网站设计中最主要的部分之一,如果希望用户很容易的在你的站点移动,导航栏的设计需要大量的思考。
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来,使用ul标签包含a。
利用HTML5+CSS3开发技术自由编写的一份导航栏特效插件,导航栏显示信息可以自定义,任意修改。
鼠标悬停导航栏,基于bootstrap和css3开发,美观简介,直接使用。
2.11 CSS开发环境与调试环境 第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么 3.1.2 如何使用div 3.1.3 理解div 3.1.4 并列与嵌套div结构 3.1.5 使用合适对象来布局 3.2 一列固定宽度 3.3 一列宽度自适应 3.4 ...
Android开发技巧——实现底部图标文字的导航栏,见文章:http://blog.csdn.net/maosidiaoxian/article/details/38864679 修订版本,点击底部导航栏时是直接切换,而不是依次滑动过去。
仿猫眼电影PC端首页开发源码,有html、css,过程中用到的图片时随机拿的,如果有需要的朋友可以之后自己下载编辑,
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发... 导航栏 光标
老规矩先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述... 导航栏 光标小下划线跟随 <li>PURE CSS<
一步步教大家编写酷炫的导航栏js+css实现.docx
用css3开发的导航示例,不到5k就能实现,200多行代码.
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!
一段Js代码根据一天中的时间将移动Chrome导航栏颜色更改为天空颜色
MAC风格的水平导航条(DIV+CSS)! 很值得下载看看!资源免费,大家分享!!
这是一个使用vue加css动画制作的menu,基于其他插件改写成vue的实现方式,可以用作菜单导航栏,后期加上vue-router,稍后把详细教程写在博客里
html + css开发导航栏: 使用CSS3实现导航栏的国际化,中英文切换
5.2.2 “滑动门”标签式导航栏实例 129 5.3 打造个性折叠菜单 132 5.4 创建下拉菜单 137 5.5 CSS图像映射 141 5.6 小结 149 第6章 表格样式设计 150 6.1 变换背景色 151 6.1.1 变换表格背景色 151 6.1.2 变换表格行...
一个简单的网页设计代码示例,包括一个顶部的标题栏(header)、导航栏(nav)、内容区域(section)和底部的页脚(footer)。您可以根据需要修改样式和内容,以创建符合您需求的网页设计。 请注意,这只是一个基本...