CSS 自适应导航菜单

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

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

目的

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

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

HTML nav标签

该标签用于导航栏，

标签通过绝对位置position:absolute属性来创建下拉菜单，我将会在后文中解释；.current标签表示活动/当前页面链接。

复制

class="nav"> > class="current">href="#">Portfolio>> >href="#">Illustration>> >href="#">Web Design>> >href="#">Print Media>> >href="#">Graphic Design>> > >

CSS

由于导航栏（桌面视图）的CSS是相当直接明了，在此就不细表。请注意，这里为

元素指定display:inline-block ，而不是float:left属性。这样对

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

标签和media query不被Internet Explorer 8或以下版本支持，当然考虑到他们的市场占有量已经很小，可以忽略这些。CSS3-mediaqueries.js （或respond.js ）和html5shim.js均提供后备支持。如果你不希望加载html5shim.js，使用

标签替换

。

复制

<!--[if lt IE 9]>

CSS 自适应导航菜单

文章目录

目的

HTML nav标签

你可能感兴趣的:(CSS 自适应导航菜单)