怎么用CSS制作响应式折叠菜单

发布时间:2021-08-10 21:09:35 作者:chen
来源:亿速云 阅读:144

本篇内容介绍了“怎么用CSS制作响应式折叠菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

一、 目的

本教程的目的是展示如何将规律的列表菜单变成一个较小的显示下拉菜单。
怎么用CSS制作响应式折叠菜单

这个技巧在由许多链接组成的导航上非常有用,例如下面的截图,可以将所有按钮压缩成一个优雅的下拉。
怎么用CSS制作响应式折叠菜单

二、Nav HTML标记

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

  1. <nav class="nav">  

  2.     <ul>  

  3.         <li class="current"><a href="#">Portfolio</a></li>  

  4.         <li><a href="#">Illustration</a></li>  

  5.         <li><a href="#">Web Design</a></li>  

  6.         <li><a href="#">Print Media</a></li>  

  7.         <li><a href="#">Graphic Design</a></li>  

  8.     </ul>  

  9. </nav>  

三、CSS

CSS Code复制内容到剪贴板

  1. /* nav */  

  2. .nav {   

  3.     positionrelative;   

  4.     margin20px 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-stylenone;   

  14.     displayinline-block;   

  15. }   

  16. .nav a {   

  17.     padding3px 12px;   

  18.     text-decorationnone;   

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

  4. }   

  5.   

  6. /* center nav */  

  7. .nav.center ul {   

  8.     text-aligncenter;   

  9. }  

五、IE的支持

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

CSS Code复制内容到剪贴板

  1. <!--[if lt IE 9]>   

  2.     <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>   

  3.     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>   

  4. <![endif]&mdash;>  

六、响应式

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

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

CSS Code复制内容到剪贴板

  1. @media screen and (max-width600px) {   

  2.     .nav {   

  3.         positionrelative;   

  4.         min-height40px;   

  5.     }       

  6.     .nav ul {   

  7.         width180px;   

  8.         padding5px 0;   

  9.         positionabsolute;   

  10.         top: 0;   

  11.         left: 0;   

  12.         bordersolid 1px #aaa;   

  13.         background#fff url(images/icon-menu.png) no-repeat 10px 11px;   

  14.         border-radius: 5px;   

  15.         box-shadow: 0 1px 2px rgba(0,0,0,.3);   

  16.     }   

  17.     .nav li {   

  18.         displaynone/* hide all <li> items */  

  19.         margin: 0;   

  20.     }   

  21.     .nav .current {   

  22.         displayblock/* show only current <li> item */  

  23.     }   

  24.     .nav a {   

  25.         displayblock;   

  26.         padding5px 5px 5px 32px;   

  27.         text-alignleft;   

  28.     }   

  29.     .nav .current a {   

  30.         backgroundnone;   

  31.         color#666;   

  32.     }   

  33.   

  34.     /* on nav hover */  

  35.     .nav ul:hover {   

  36.         background-imagenone;   

  37.     }   

  38.     .nav ul:hover li {   

  39.         displayblock;   

  40.         margin: 0 0 5px;   

  41.     }   

  42.     .nav ul:hover .current {   

  43.         backgroundurl(images/icon-check.png) no-repeat 10px 7px;   

  44.     }   

  45.   

  46.     /* right nav */  

  47.     .nav.rightright ul {   

  48.         leftauto;   

  49.         rightright: 0;   

  50.     }   

  51.   

  52.     /* center nav */  

  53.     .nav.center ul {   

  54.         left: 50%;   

  55.         margin-left: -90px;   

  56.     }   

  57.   

  58. }  

“怎么用CSS制作响应式折叠菜单”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. jquery如何实现折叠菜单效果
  2. 怎么用CSS3实现响应式导航菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:怎么用CSS中的map标签制作单图多区域点击

下一篇:CSS3实现动画按钮代码分享

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》