CSS3响应式导航菜单

今天我给大家介绍一下如何使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单。

此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。

查看演示DEMO

HTML

示例中有一个导航菜单的html结构，元素<nav>用来定位导航菜单，.current表示当前活动的导航项。

<ul>
<liclass="current"><ahref="#">首页</a></li>
<li><ahref="#">客户服务</a></li>
<li><ahref="#">产品展示</a></li>
<li><ahref="#">经典案例</a></li>
<li><ahref="#">联系我们</a></li>
</ul>

CSS

首先我们要给菜单nav相对定位，我们在.nav li中使用display: inline-block代替float:left，这样一来我们可以使用text-align 来对nav菜单进行左中右对齐设置。

.nav { 
position:relative; 
margin:20px0; 
} 
.navul { 
margin:0; 
padding:0; 
} 
.navli { 
margin:05px10px0; 
padding:0; 
list-style:none; 
display:inline-block; 
} 
.nava { 
padding:3px12px; 
text-decoration:none; 
color:#999; 
line-height:100%; 
} 
.nava:hover { 
color:#d0d0d0; 
} 
.nav.currenta { 
background:#999; 
color:#fff; 
    border-radius: 5px; 
} 

使用text-align对菜单进行右对齐和居中对齐。

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

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

接下来我们来做响应式设计，我们使用CSS3的media query来实现。当浏览器窗口宽度小于600px时，我们把<nav>设置成relative相对定位，把<ul>设置成absolute绝对定位，并且display:none隐藏所有li元素，这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时，菜单下拉展开，设置所有li的样式display: block，具体请看代码：

@mediascreenand (max-width: 600px) { 
    .nav { 
position:relative; 
min-height:40px; 
    }     
.navul { 
width:180px; 
padding:5px0; 
position:absolute; 
top:0; 
left:0; 
border:solid1px#aaa; 
background:#fffurl(images/menu.png)no-repeat10px11px; 
        border-radius: 5px; 
        box-shadow: 01px2px rgba(0,0,0,.3); 
    } 
.navli { 
display:none; /* hide all  items */
margin:0; 
    } 
.nav.current { 
display: block; /* showonlycurrent

• item */
   }
.nava {
display:block;
padding:5px5px5px32px;
text-align:left;
   }
.nav.currenta {
background:none;
color:#666;
   }

/* on nav hover */
.navul:hover {
background-image:none;
   }
.navul:hoverli {
display:block;
margin:005px;
   }
.navul:hover.current {
background:url(images/check.png)no-repeat10px7px;
   }

/* right nav */
.nav.rightul {
left:auto;
right:0;
   }

/* center nav */
.nav.centerul {
left:50%;
margin-left: -90px;
   }

}