html响应式布局导航栏,纯CSS实现的HTML5响应式导航栏

目前响应试web页面已经逐渐开始盛行，除了将页面的内容以及布局结构实现响应试以外，剩下的重点就是实现导航栏的响应试，当然方法有很多，不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术，它采用的是简洁的html5标签结构来实现的应式导航栏，导航栏能够被 轻松的控制在左侧，中部，已经右侧。当鼠标经过导航栏时就会平滑拉菜单，不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。

这篇文章的目的是让大家能够知道 如何将普通的导航栏转变成小型的可伸缩的下拉菜单。

这种技术非常适合用于多栏目导航栏，如下图所示你可以将所有的导航栏目精简成一个优雅的菜单按钮。

HTML5导航标签结构

如果想使用纯css实现该效果，首先应该使用 标签，它是创建css下拉框所必须使用的结构，用.current类标记出当前的菜单栏目。

CSS属性

首先以下所使用的css属性跟我们平常见到的方法没什么区别，细节就不多说了，但是我们注意到 nav ui li元素中使用了display:inline-block;这个属性替代了原先常用的float:left属性，这就是不同的地方。

使用display:inline-block这个方法后，我们就可以随意的调整转换后菜单按钮的位置了，如果要改变按钮位置只需在 nav ul 元素中添加 text-align：left; text-align：center; 或者 text-align：right; 即可。

/* right nav */

.nav.right ul {

text-align: right;

}

/* center nav