您现在的位置是：网站首页> 编程资料编程资料

纯CSS制作的响应式折叠菜单分享纯CSS实现圆角折叠菜单的方法CSS3实现的支持同时折叠多个菜单的手风琴菜单特效源码 CSS3实现的垂直手风琴折叠菜单特效源码css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单jQuery/CSS3实现的可折叠侧边栏菜单特效源码基于CSS3实现的3D折叠展开动画菜单特效源码基于jquery+css3实现左右摇摆可滑动展开折叠圆形导航菜单纯css实现多级折叠菜单折叠树效果

2021-09-05 658人已围观

简介 这篇文章主要介绍了纯CSS制作的响应式折叠菜单分享,请看文章开头的示例,并不要用到JavaScript代码~需要的朋友可以参考下

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

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

本教程的目的是展示如何将规律的列表菜单变成一个较小的显示下拉菜单。
2015720182636640.png (360×247)

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

二、Nav HTML标记

XML/HTML Code复制内容到剪贴板
  1. <nav class="nav">  
  2.     <ul>  
  3.         <li class="current"><a href="#">Portfolioa>li>  
  4.         <li><a href="#">Illustrationa>li>  
  5.         <li><a href="#">Web Designa>li>  
  6.         <li><a href="#">Print Mediaa>li>  
  7.         <li><a href="#">Graphic Designa>li>  
  8.     ul>  
  9. nav>  

三、CSS

CSS Code复制内容到剪贴板
  1. /* nav */  
  2. .nav {   
  3.     position: relative;   
  4.     margin: 20px 0;   
  5. }   
  6. .nav ul {   
  7.     margin: 0;   
  8.     padding: 0;   
  9. }   
  10. .nav li {   
  11.     margin: 0 5px 10px 0;   
  12.     padding: 0;   
  13.     list-style: none;   
  14.     display: inline-block;   
  15. }   
  16. .nav a {   
  17.     padding: 3px 12px;   
  18.     text-decoration: none;   
  19.     color: #999;   
  20.     line-height: 100%;   
  21. }   
  22. .nav a:hover {   
  23.     color: #000;   
  24. }   
  25. .nav .current a {   
  26.     background: #999;   
  27.     color: #fff;   
  28.     border-radius: 5px;   
  29. }  

四、居中和右对齐

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

CSS Code复制内容到剪贴板
  1. /* right nav */  
  2. .nav.rightright ul {   
  3.     text-align: rightright;   
  4. }   
  5.   
  6. /* center nav */  
  7. .nav.center ul {   
  8.     text-align: center;   
  9. }  

五、IE的支持

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

CSS Code复制内容到剪贴板