页面导航实现

Web页面的导航菜单一般用列表项实现，根据导航的位置划分：纵向导航和横向导航。我们先从最简单的纵向导航开始

纵向导航

下面是仿照百度新闻页面的导航菜单，HTML标记如下

 1 <!DOCTYPE html>
 2 <html lang="zh_ch">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5     <title>HTML 5 Nav</title>
 6     <style>
 7     </style>
 8 </head>
 9 <body>
10 <nav class="nav-list">
11                 <ul>
12                     <li><a href="http://news.baidu.com/view.html">首页</a></li>
13                     <li><a href="http://baijia.baidu.com/" id="nav-hot-link" target="_blank">百家</a></li>
14                     <li><a href="http://jian.news.baidu.com/" target="_blank"><div class="icon-new"></div>个性推荐</a></li>
15                     <li><a href="http://sh.news.baidu.com/">上海</a></li>
16                     <li><a href="http://internet.baidu.com/">互联网</a></li>
17                     <li><a href="http://media.baidu.com/">传媒</a></li>
18                     <li><a href="http://auto.baidu.com/">汽车</a></li>
19                     <li><a href="http://yule.baidu.com/">娱乐</a></li>
20                     <li><a href="http://mil.news.baidu.com/">军事</a></li>
21                     <li><a href="http://finance.baidu.com/">财经</a></li>
22                     <li><a href="http://sports.baidu.com/">体育</a></li>
23                     <li><a href="http://guonei.news.baidu.com/">国内</a></li>
24                     <li><a href="http://shehui.news.baidu.com/">社会</a></li>
25                     <li><a href="http://tech.baidu.com/">科技</a></li>
26                     <li><a href="http://guoji.news.baidu.com/">国际</a></li>
27                     <li><a href="http://lady.baidu.com/">女人</a></li>
28                     <li><a href="http://fangchan.news.baidu.com/">房产</a></li>
29                     <li><a href="http://youxi.news.baidu.com/">游戏</a></li>
30                     <li><a href="http://shipin.news.baidu.com/">视频</a></li>
31                 </ul>
32 </nav>
33 </body>
34 </html>

HTML 5新标签nav在语义上适合做页面导航，因此我们选择它作为页面导航的容器

预览之后，在页面中显示的是一个纵向上下排列的无序列表项目，因为<li>标签是块级元素，所以列表显示为上下排列

美化导航

默认的纵向导航毫无美感，现在我们需要用CSS来美化导航样式

首先清楚默认的盒子内外边距

 * {margin:0; padding:0;}

这样的话，页面中所有元素的内外边距，都被重置为0 ，这样做的好处是为了后面添加自己的内外边距

导航位置

导航菜单放置在页面中什么位置呢？上、下、左、右？这取决于你项目需要，默认情况下，导航菜单是放置在页面左上角的，因为这是HTML盒模型的默认定位方式。下面我们将纵向导航调整到页面的左侧

nav {margin:20px; width:120px;}

先将nav标签的外边距设置为20px，并设置了盒子的宽度为120px

采用绝对定位的方式，将导航设置到页面的左侧

nav{position:absolute;right:1px;top:1px;}

添加样式

下面CSS样式，设置了ul边框、样式、颜色、圆角、内边距

 .nav-list ul {border:1px solid #f00; border-radius:20px;padding:6px;}

去掉列表项的下划线

.nav-list li {list-style-type:none; padding:6px 10px;}

默认情况下<li>列表项是带有下划线的，这里通过CSS样式清楚了这种效果

为每个列表项，添加自己的下划线，以下代码利用了“非首位子选择符”，它是紧邻同胞选择符的升级版，它实现了为除了列表的第一项外，其他的每个列表项目顶部都添加一条下划线效果，这里的下划线是利用盒子的边框显示的

 .nav-list li + li {border-top:1px solid green;}

除了用“非首位子选择符”实现列表项底部划线效果外，还可以用伪选择符来实现同样的效果

li{border-top: 1px solid;}
li:first-child{border-style: none;}

上面的CSS样式，先给所有列表项添加顶部边框，然后使用伪类，清楚了，第一个列表项的顶部边框，既然把第一个列表项排除了，从而到达和“非首位子选择符”同样的效果

为链接添加样式

         /*为链接添加样式*/
        .nav-list a {text-decoration:none;font-size:20px;font-weight:400; color:#000;;}
        /*悬停高亮*/
        .nav-list a:hover {color:green;}

点击区域扩大

由于<a>链接是可以点击的，而<li>是不可以点击的，最佳的用户体验是让这个列表行都可以点击，而不仅仅是链接那么一小块区域

.nav-list li+li a{border-top: 1px solid green }
.nav-list a{display: block;padding: 3px 10px ;}

横向导航

<!DOCTYPE html>
<html lang="zh_ch">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>HTML 5 Nav</title>

</head>
<body>
<nav class="nav-list">
                <ul>
                    <li><a href="http://news.baidu.com/view.html">首页</a></li>
                    <li><a href="http://baijia.baidu.com/" id="nav-hot-link" target="_blank">百家</a></li>
                    <li><a href="http://jian.news.baidu.com/" target="_blank"><div class="icon-new"></div>个性推荐</a></li>
                    <li><a href="http://sh.news.baidu.com/">上海</a></li>
                    <li><a href="http://internet.baidu.com/">互联网</a></li>
                    <li><a href="http://media.baidu.com/">传媒</a></li>
                    <li><a href="http://auto.baidu.com/">汽车</a></li>
                    <li><a href="http://yule.baidu.com/">娱乐</a></li>
                    <li><a href="http://mil.news.baidu.com/">军事</a></li>
                    <li><a href="http://finance.baidu.com/">财经</a></li>
                    <li><a href="http://sports.baidu.com/">体育</a></li>
                    <li><a href="http://guonei.news.baidu.com/">国内</a></li>
                    <li><a href="http://shehui.news.baidu.com/">社会</a></li>
                    <li><a href="http://tech.baidu.com/">科技</a></li>
                    <li><a href="http://guoji.news.baidu.com/">国际</a></li>
                    <li><a href="http://lady.baidu.com/">女人</a></li>
                    <li><a href="http://fangchan.news.baidu.com/">房产</a></li>
                    <li><a href="http://youxi.news.baidu.com/">游戏</a></li>
                    <li><a href="http://shipin.news.baidu.com/">视频</a></li>
                </ul>
</nav>
</body>
</html>

CSS样式

<style>
    .nav-list ul {
        /*强制ul 包围浮动的li 元素*/
        overflow:hidden;
    }
    .nav-list li {
        /*让li 元素水平排列*/
        float:left;
        /*去掉项目符号*/
        list-style-type:none;
    }
    .nav-list a {
        /*让链接填满li 元素*/
        display:block;
        padding:0 16px;
        /*去掉链接的下划线*/
        text-decoration:none;
        color:#999;
    }
    .nav-list li + li a {border-left:1px solid #aaa;}
    .nav-list a:hover {color:#555;}
</style>