使用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;
}
 

流行输入法使用小记

输入法使用小记。
  • liming0931
  • liming0931
  • 2016年04月21日 21:09
  • 2663

最近收集的9000个英语单词

wrong                                   adj.错误的;不道德的;不适合的;不正常的adv.错误地n.坏事;不公正的事;错误v.无礼地对待;冤枉 visual...
  • hxpjava1
  • hxpjava1
  • 2014年08月31日 22:39
  • 28191

linux服务器开发二(系统编程)--线程相关

线程概念 什么是线程 LWP:Light Weight Process,轻量级的进程,本质仍是进程(在Linux环境下)。进程:独立地址空间,拥有PCB。线程:也有PCB,但没有独立的地址...
  • a815064247
  • a815064247
  • 2017年07月13日 20:18
  • 276

CSS高效开发实战 (笔记)

书名: CSS高效开发实战 CSS3 LESS SASS Bootstrap Foundation 作者: 谢郁 编著第十四章 LESS 和 SASS1 CSS 存在重复,需要一种对 CSS进行 ...
  • lllliulin
  • lllliulin
  • 2015年05月17日 16:45
  • 629

项目开发过程中的细节问题及解决方法(Vue,Css)(入门级)

Vue开发填坑方法methods通用问题描述: vue开发过程中很多时候,函数方法methods会在各个组件内共用,每个组件都写个比较多余。 解决方法: 1.利用CommonJS思想,单独写,然...
  • HeliumLau
  • HeliumLau
  • 2017年04月10日 16:45
  • 2263

Java微信支付开发之扫码支付模式二

官方文档点击查看 准备工作:已通过微信认证的公众号,域名可以不通过ICP备案 借鉴了很多大神的文章,在此先谢过了 大体过程:根据固定金额和商品的ID先生成订单,再生成二维码,客户扫一扫付款...
  • phil_jing
  • phil_jing
  • 2017年06月30日 01:44
  • 2714

你只是追逐时髦的码农

时髦的技术,时髦的语言看起来真的很棒时髦终究只是一股风,被人为吹起来的风,我们不能被潮流牵着鼻子走,因为终究我们会被下一波潮流冲走,而留下的都是一些浮藻。 时髦不是因为他完美而流行,是因为有人在鼓吹他...
  • u011235518
  • u011235518
  • 2016年03月26日 10:50
  • 166

从css谈模块化

目录目录 自述 前言 背景 复用 规范 框架 模块 元件 重构common 模块 设计原则 继承 状态 总结 预告自述  看到好的文章就喜欢转载收藏一波,这会看了一篇《从css谈模块化——jack_l...
  • qq_15096707
  • qq_15096707
  • 2017年01月06日 23:49
  • 501

不容错过的17款面向CSS开发人员的实用框架及工具

几乎每一天我们都以找到值得分享的实用工具,帮助大家在CSS开发这条探索之路上找到新的光明前景与几乎无尽的可能性。遥想当初,我们一路见证了CSS的成长,而如今我们能够不容置疑地断言,CSS已经成为Web...
  • zhang_Red
  • zhang_Red
  • 2015年06月27日 10:28
  • 1024

CSS中的变量使用详解

CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升防错能力。示例:root { --base-font-size: 16px; --link-color: #6495ed; ...
  • u011043843
  • u011043843
  • 2015年06月13日 09:39
  • 8091
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用CSS开发时髦的导航栏(二)
举报原因:
原因补充:

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