文章目录
以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需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; } }