您的位置：首页 > 其它

页面导航实现

2015-08-05 09:23 253 查看
Web页面的导航菜单一般用列表项实现，根据导航的位置划分：纵向导航和横向导航。我们先从最简单的纵向导航开始

纵向导航

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

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


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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航