html css时尚导航栏,使用CSS开发时髦的导航栏

我能够使用和列表创造有子菜单的导航栏吗？

有时候我们需要超过一级的导航栏 –可是在里面用样式化的列表能够创建多级导航栏吗？

解决方案

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

为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：

/SPAN>

"">

Lists as navigation

content="text/html; charset=utf-8" />

#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范围之内的子部分。即使没有任何样式，列表的结构依然清晰且容易理解，就象你在图5看到的一样。

图5：没有使用样式，包含子菜单的导航栏

下面是我们用来在主要项目的li元素里面标记这个简单的嵌套列表的HTML代码：

用HTML，如果简单的使用本文前面的，不做任何修改的话，导航菜单的显示将如图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;

}

如何使用和列表构造一个水平菜单？

到目前为止，我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而，导航栏也常常被做成水平菜单紧挨在文本上方。

解决方案

图8显示的这种类型的导航栏可以用样式化的列表实现。li元素必须被设置成inline(内联)显示，这样可以避免每个列表元素换行显示。

图8：水平菜单导航栏

这是产生这个显示效果的HTML和代码：

/SPAN>

"">

Lists as navigation

content="text/html; charset=utf-8" />

#navigation {

font-size: 90%;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

#navigation li {

display: inline;

}

#navigation a:link, #navigation a:visited {

padding: 0.4em 1em 0.4em 1em;

color: #FFFFFF;

background-color: #B51032;

text-decoration: none;

border: 1px solid #711515;

}

#navigation a:hover {

color: #FFFFFF;

background-color: #711515;

}

讨论

为了产生水平导航栏，我们从创建一个和前面垂直导航栏ID一样的列表开始：

象我们在垂直导航栏做的一样，我们样式化#navigation容器，给它设置一些基本的字体信息。如果页面完全是布局的话，这个ID可能还会包含一些确定导航栏在页面位置的样式：

#navigation {

font-size: 90%;

}

在ul元素的样式里面，我们移除掉列表在浏览器显示时的标志位和缩进：

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

下面是把li元素的显示从垂直变换到水平的属性：

#navigation li {

display: inline;

}

在我们把display属性设定为inline之后，这个列表显示出来象图9一样：

图9：disply:inline的列表显示

我们剩下的工作是样式化导航栏的链接：

#navigation a:link, #navigation a:visited {

padding: 0.4em 1em 0.4em 1em;

color: #FFFFFF;

background-color: #B51032;

text-decoration: none;

border: 1px solid #711515;

}

#navigation a:hover {

color: #FFFFFF;

background-color: #711515;

}

如果你想像我这样，在每个链接外面创建一个框，记得为了在文本和它的容器边缘留更多的空隙，你必须在链接左面和右边设定更多的padding，为了在导航栏各个项目间增加更多空隙，你必须增加链接左边和右边的margins。

如何用创建按钮类型的导航栏？

看上去像是可以点击的按钮组成的导航栏是很多网站的一个特色。这种类型的导航栏常常靠模拟成按钮样子的图片来创建，通常还需要一些Javascript脚本来切换到另一张图片，这样可以模拟按钮被按下或者鼠标在上面高亮显示的效果。

只用有可能创造这样类似按钮的导航栏吗？当然！

解决方案

使用创建一个象图10显示的按钮效果是可能的，并且比较简单。这个效果的成功与否取决于你对于里面border属性的使用能力。

图10：按钮效果的导航栏

这是你需要的代码：

/SPAN>

"">

Lists as navigation

content="text/html; charset=utf-8" />

/>

#navigation {

font-size:90%

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

#navigation li {

display: inline;

}

#navigation a:link, #navigation a:visited {

margin-right: 0.2em;

padding: 0.2em 0.6em 0.2em 0.6em;

color: #A62020;

background-color: #FCE6EA;

text-decoration: none;

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

border-bottom: 1px solid #717171;

border-right: 1px solid #717171;

}

#navigation a:hover {

border-top: 1px solid #717171;

border-left: 1px solid #717171;

border-bottom: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

}

讨论

为了创建这个效果，我们将使用在“如何用创建按钮类型的导航栏？”章节中描述的水平列表导航栏。与之不同的是，为了创建按钮外观，我们将在每个按钮的上边和左边使用不同于下边和右边的颜色边框。通过给上边和左边赋值比下边及右边的边框亮一些的颜色，我们创建了一个略微突起的效果。

#navigation a:link, #navigation a:visited {

margin-right: 0.2em;

padding: 0.2em 0.6em 0.2em 0.6em;

color: #A62020;

background-color: #FCE6EA;

text-decoration: none;

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

border-bottom: 1px solid #717171;

border-right: 1px solid #717171;

}

在鼠标停留在上面的状态下，我们反转边框的颜色，这样就创造了按钮被按下的效果。

#navigation a:hover {

border-top: 1px solid #717171;

border-left: 1px solid #717171;

border-bottom: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

}

试着使用更深的边框，改变链接的背景图片，去创造属于你自己的设计。