导航栏样式示例：一个漂亮的导航栏样式-优米格

在看一些博客，或者打算自己做WEB开发过程中，经常会考虑到导航菜单的使用，有些导航菜单会让你赞不绝口，自己想要做一个好看的菜单时，又会感到十分的头疼，下面我就从一个导航菜单的例子Demo，来学习导航菜单的制作过程。

首先，我们看一下页面组成：

HTML部分

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>导航栏示例demo1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <ul id="nav">
    <li id="nav-home"><a href="#" class="current">Home</a></li>
    <li id="nav-about"><a href="#">About</a></li>
    <li id="nav-archive"><a href="#">Archive</a></li>
    <li id="nav-lab"><a href="#">Lab</a></li>
    <li id="nav-reviews"><a href="#">Reviews</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    </ul>
    </body>
</html>

页面的结构很简单，它是一个包含着若干个链接的列表项组成的无序列表。为什么要用一个无序列表呢？因为导航栏或者说菜单，都是一系列的链接。最好或者说最直观地表现一系列链接的方式就是采用列表元素。采用无序列表还有一个好处就是，即使在样式不可用的情况下，无序列表依然可以提供这种菜单结构。在不加样式的情况下，它看起来就像是一个项目列表的样式。

下面我们就来给他一些样式：

CSS部分

首先，把无序列表ul和列表项li的外边距和内边距都设置为0，然后让列表项的显示方式为inline，这一步的CSS代码如下：

#nav {

    margin:0;

    padding:0;

    }

    #nav li {

    display:inline;

    padding:0;

    margin:0;

    }

此时，页面的显示效果变为：

面的CSS代码，让所有的链接一个接一个的位于一行，就好像列表不存在一样。它也把项目列表的符号去掉了，因为这些项目列表符号只会在使用display:list-item（默认模式）时才会显示。某些浏览器据说在列表项应用了display:inline之后还会显示项目符号，但是在我测试的浏览器中还没有出现过这种情况，如果你想确保所有的浏览器都不会显示项目符号，你可以对#nav加入样式：list-style-type:none。

下一步，我们需要装点一下菜单卡了。我是通过对链接加入样式而不是对列表项加样式来完成这一步的。原因在于：我想让每个选项卡的整个区域都可点击。让我们给导航栏添点色彩，让变化更明显一些：

 #nav a:link,

#nav a:visited {

    color:#000;

    background:#b2b580;

}

下面就是加了色彩之后的样子：

下一步，我们给这些链接加点内边距：

 #nav a:link,

    #nav a:visited {

    color:#000;

    background:#b2b580;

    padding:20px 40px 4px 10px;

    }

这样看起好点了，但是有个无法看到的潜在问题，由于links是行内元素，他们的垂直内边距不会算在行高之中，如果ul有一个背景会看的清楚一点，所以我无需列表ul增加了一个背景颜色和一张背景图片：

 #nav {

    margin:0;

    padding:0;

    background:#808259 url(nav_bg.jpg) 0 0 repeat-x;

    }

哦，太糟糕了，链接伸到列表元素外面来了。为了弥补，我通过让他们向左浮动来让他们编程块级元素。我还把宽度设为自动，从而让他们根据内容来自适应。

#nav a:link,

    #nav a:visited {

    color:#000;

    background:#b2b580;

    padding:20px 40px 4px 10px;

    float:left;

    width:auto;

    }

为链接增加样式：display:block也能够使链接变为块级元素但是由于浮动会让元素自动变为块级元素，所以就没必要增加这样式了。

可能你会发现，当为链接设置浮动后背景消失了。这是因为浮动元素让文档元素流转，导致包含他们的元素的高度为0，因此背景虽然在那里，但是看不到了。为了使ul跟链接保持亲密接触，我也让ul浮动。我让它的宽度平铺窗口：

#nav {

    margin:0;

    padding:0;

    background:#808259 url(nav_bg.jpg) 0 0 repeat-x;

    float:left;

    width:100%;

    }

为了让各个链接之间可以相互区分，我给链接加右侧border，然后给第一个链接左border，我还给ul的上和下增加了border：

 #nav {

    margin:0;

    padding:0;

    background:#808259 url(nav_bg.jpg) 0 0 repeat-x;

    float:left;

    width:100%;

    border:1px solid #42432d;

    border-width:1px 0;

    }

    #nav a:link,

    #nav a:visited {

    color:#000;

    background:#b2b580;

    padding:20px 40px 4px 10px;

    float:left;

    width:auto;

    border-right:1px solid #42432d;

    }

    #nav li:first-child a {

    border-left:1px solid #42432d;

    }

注意：
first-child这个对象在IE中并不推荐，但是在IE中没有左侧的border并没有太大的影响，所以我就让它保持这样。如果它对你很重要，你需要给第一个列表项加一个class，然后通过class增加左侧border。

接下来，我要通过让链接去掉下划线，文本加粗，指定字体的大小，行高，字体，文字大写，稍微加一点阴影等，让它显示的更加好看点。阴影是通过现在可能只被Safari和OmniWeb等浏览器支持的CSS3新属性text-shadow来实现。

 #nav a:link,

    #nav a:visited {

    color:#000;

    background:#b2b580;

    padding:20px 40px 4px 10px;

    float:left;

    width:auto;

    border-right:1px solid #42432d;

    text-decoration:none;

    font:bold 1em/1em Arial, Helvetica, sans-serif;

    text-transform:uppercase;

    text-shadow: 2px 2px 2px #555;

    }

为了增加可视化的交互效果，我们再让链接的hover和focus状态在鼠标掠过时，改变一下文本颜色和背景颜色。最后一步，为了让选中的链接和其他的链接区分开来，让访问者知道他们所在的位置，我还要增加一些样式。

最后的效果，如下图：

导航栏样式示例：一个漂亮的导航栏样式

评论抢沙发

最新评论

合作&反馈&投稿

商务合作、问题反馈、投稿，欢迎联系

切换注册登录

切换登录注册

评论 抢沙发