纯CSS制作的响应式折叠菜单分享

}   
.nav .current a {   
    background: #999;   
    color: #fff;   
    border-radius: 5px;   
}  

四、居中和右对齐

正如前面提到的，可以同过text-align属性改变对齐方式。

CSS Code复制内容到剪贴板

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

五、IE的支持

在IE 8以及更早版本中，是不支持HTML5的nav标签和媒体查询。引入css3-mediaqueries.js(或 respond.js) 和 html5shim.js 提供后备的兼容处理。如果你不想用html5shim.js，可以用div代替nav

CSS Code复制内容到剪贴板

<!–[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]—>  

六、响应式

现在有趣的部分来了——媒体查询菜单的响应性。如果你对响应式设计不熟悉，可以阅读之前我写的关于responsive design （后续翻译）and media query的文章。

在600 px断点，我把nav元素设置成相对定位，这样，我就能对ul元素进行绝对定位了。通过display:none，我隐藏了所有的li元素，但保持当前的li元素以块元素显示。然后，当鼠标悬浮于nav元素时，将所有li添加display:block.为了标记当前的li元素，我会添加一个图标。对于居中和右对齐，对定位的ul元素使用left和right属性。看看最终的Demo效果：

CSS Code复制内容到剪贴板

@media screen and (max-width: 600px) {   
    .nav {   
        position: relative;   
        min-height: 40px;   
    }       
    .nav ul {   
        width: 180px;   
        padding: 5px 0;   
        position: absolute;   
        top: 0;