CSS 自适应导航菜单

文章目录

之前我写了一篇关于如何为自适应网页制做教程手机导航菜单，如今我又摸索出一种无需JS脚本的自适应导航菜单，它采用纯粹的语义化HTML5标签来完成。该菜单能够左对齐，居中或右对齐，也不像上一种方法中须要点击来展开列表，本例中悬停激活更加方便，并且它能经过标记代表当前位置。它适用于全部的移动和桌面浏览器，包括万恶的Internet Explorer！

示例：自适应菜单             http://webdesignerwall.com/demo/responsive-menu/

目的

本教程的目的是展现如何将一个常规列表菜单变成下拉菜单，用来适应较小的屏幕，以下图效果：

 

 

这种方案对下图所示的多条目导航栏效果显著，能够将多个条目合并成为一个优雅的下拉列表。

 

 

HTML nav标签

该标签用于导航栏，<nav>标签经过绝对位置position:absolute属性来建立下拉菜单，我将会在后文中解释；.current标签表示活动/当前页面连接。

复制

<nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Print Media</a></li> <li><a href="#">Graphic Design</a></li> </ul> </nav>

CSS

因为导航栏（桌面视图）的CSS是至关直接明了，在此就不细表。请注意，这里为<li>元素指定display:inline-block ，而不是float:left属性。这样对<ul>元素指定text-align内容，就可让菜单按钮左对齐、居中或右对齐。

复制

/* nav */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }

居中和右对齐

正如上文所述，可使用text-align属性来改变按钮的对齐。

复制

/* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }

Internet Explorer的支持

HTML5 <nav>标签和media query不被Internet Explorer 8或如下版本支持，固然考虑到他们的市场占有量已经很小，能够忽略这些。CSS3-mediaqueries.js （或respond.js ）和html5shim.js均提供后备支持。若是你不但愿加载html5shim.js，使用<div>标签替换<nav>。

复制

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

自适应

如今这里是有趣的部分 – 让菜单根据media query规则来自适应！若是看过我之前的文章：自适应设计和media query ，你不会对自适应感到陌生。

以600px为分界点，设置nav元素设为相对位置position: relative，这样就能够把<ul>菜单列表用绝对位置position: absolute固定在顶部；而且使用display:none属性隐藏全部<li>元素，但保留.current <li>显示为块（block）；而后是nav悬停属性，将全部<li>变回显示display:block，这将产生下拉列表；为.current元素添加了图标，以代表它是当前页面。对于菜单居中和右对齐问题，这里使用left和righ属性来定位<ul>。查看演示 ，看看最终效果。

复制

@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all <li> items */ margin: 0; } .nav .current { display: block; /* show only current <li> item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }