Lists as navigation">

十年风雨路 · 一心铸精品

接一个官网 留一件精品 做一个项目 树一块样板

用CSS开发时髦的导航栏第二篇

解决方案 在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。 为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色、边界和链接属性: Lists as navigation

时间:2013年01月15日 点击量:

解决方案

在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持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;

}

推荐案例

  • 成都森美啦园林绿化工程公

  • 四川尚恒科技有限公司

  • 成都九邦物流有限责任公司

  • 四川品睿餐饮管理有限公司

  • 美绘陶社陶艺手绘工作室-暖

  • 成都恩多施生物工程技术有

  • 汶川羌人土特产有限公司

  • 印刷设计公司网站No.3138

联系我们 / CONTACT US

  • 四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903室
  • 服务热线:400-000-2367 028-86088588
  • 总机:028-62322623-0
  • 传真:028-62322623-823

扫码访问冠辰手机网站

版权所有 Copyright © 2002-2019 yabo体育官方  www.zhonghuiwuliu.com 保留所有权利  蜀ICP备11012605号

地址:四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903室

服务热线:400-000-2367 028-86088588 总机:028-62322623-0 传真:028-62322623-823

川公网安备 51010602001006号