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

不合身的衣服我可以凑合着穿，不合适的人我却不能勉强去留。早安！新的一天，好运正在派件，请保持心情舒畅，早安。

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

首先，看看Demo的效果：Demo
一、目的

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

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

二、Nav HTML标记

XML/HTML Code复制内容到剪贴板

<navclass="nav">
<ul>
<liclass="current"><arel="nofollow noopener noreferrer" href="#">Portfolio</a></li>
<li><arel="nofollow noopener noreferrer" href="#">Illustration</a></li>
<li><arel="nofollow noopener noreferrer" href="#">WebDesign</a></li>
<li><arel="nofollow noopener noreferrer" href="#">PrintMedia</a></li>
<li><arel="nofollow noopener noreferrer" href="#">GraphicDesign</a></li>
</ul>
</nav>

三、CSS

CSS Code复制内容到剪贴板

/*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:#000;
}
.nav.currenta{
background:#999;
color:#fff;
border-radius:5px;
}

四、居中和右对齐

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

CSS Code复制内容到剪贴板

/*rightnav*/
.nav.rightrightul{
text-align:rightright;
}
/*centernav*/
.nav.centerul{
text-align:center;
}

五、IE的支持

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

CSS Code复制内容到剪贴板

<!--[ifltIE9]>
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<scriptsrc="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复制内容到剪贴板

@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/icon-menu.png)no-repeat10px11px;
border-radius:5px;
box-shadow:01px2pxrgba(0,0,0,.3);
}
.navli{
display:none;/*hideall<li>items*/
margin:0;
}
.nav.current{
display:block;/*showonlycurrent<li>item*/
}
.nava{
display:block;
padding:5px5px5px32px;
text-align:left;
}
.nav.currenta{
background:none;
color:#666;
}
/*onnavhover*/
.navul:hover{
background-image:none;
}
.navul:hoverli{
display:block;
margin:005px;
}
.navul:hover.current{
background:url(images/icon-check.png)no-repeat10px7px;
}
/*rightnav*/
.nav.rightrightul{
left:auto;
rightright:0;
}
/*centernav*/
.nav.centerul{
left:50%;
margin-left:-90px;
}
}

到此这篇关于纯CSS制作的响应式折叠菜单分享就介绍到这了。青春啊，永远是美好的，可是真正的青春，只属于这些永远力争上游的人，永远忘我劳动的人，永远谦虚的人。更多相关纯CSS制作的响应式折叠菜单分享内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

全站频道

大家都在搜索：