CSS：响应式下的折叠菜单(条纹式)_html/css

CSS：响应式下的折叠菜单(条纹式)_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:51:28

Original

942 Leute haben es durchsucht

原文： CSS: Responsive Navigation Menu

译文：CSS：响应式导航菜单

译者：dwqs

写在之前，关于如何制作响应式的下拉菜单：响应式下的下拉菜单

之前，我写了一篇关于怎么制作响应式的移动导航的教程。现在，我发现了一个新技巧，不用使用JavaScript就能实现响应式菜单，而是使用HTML 5清晰的语义标记。

这个菜单能居左、居中和居右对齐，不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换。它也有一个标记显示激活/当前菜单项，并且它能作用在所有移动平台和包括IE在内的所有桌面浏览器。

首先，看看Demo的效果：Demo

一、目的

本教程的目的是展示如何将规律的列表菜单变成一个较小的显示下拉菜单。

这个技巧在由许多链接组成的导航上非常有用，例如下面的截图，可以将所有按钮压缩成一个优雅的下拉。

二、Nav HTML标记

<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>

Nach dem Login kopieren

三、CSS

/* 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;}

Nach dem Login kopieren

四、居中和右对齐

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

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

Nach dem Login kopieren

五、IE的支持

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

Nach dem Login kopieren