用CSS3设计响应式导航菜单

 关于使用响应式设计来创建一个手机导航栏，之前我曾经写过一个教程。现在我发现了一种新的方式，可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐。不像前面一个教程中需要点击来展开，这个菜单可以在hover时展开，对用户更为友好。它也包含一个指示器来显示当前激活的菜单项。这种方式可以工作于所有的移动和桌面浏览器中，甚至包括IE。

演示

         目标

         这个教程的目标是向你展示如何把一个传统的列表菜单在更小的屏幕上转换为可伸展的菜单。

         这种方式对于下图这种有很多链接的导航来说非常有用。你可以把所有的按钮转换为一个优雅的伸展条。

         HTML代码

         下面是导航的HTML代码。<nav>标签用于创建伸展条，包含绝对定位的css属性。我会在稍后解释这一点，current类表示当前激活的菜单链接。

[html]  view plain   copy

1. <nav class="nav">  
2.     <ul>  
3.         <li class="current"><a href="#">Portfolio</a></li>  
4.         <li><a href="#">Illustration</a></li>  
5.         <li><a href="#">Web Design</a></li>  
6.         <li>