首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 922
收藏 0 赞 0 分享

这个菜单能居左、居中和居右对齐，不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换。它也有一个标记显示激活/当前菜单项，并且它能作用在所有移动平台和包括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="#">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.     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复制内容到剪贴板
  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]—>  

六、响应式

现在有趣的部分来了——媒体查询菜单的响应性。如果你对响应式设计不熟悉，可以阅读之前我写的关于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-width: 600px) {   
  2.     .nav {   
  3.         position: relative;   
  4.         min-height: 40px;   
  5.     }       
  6.     .nav ul {   
  7.         width: 180px;   
  8.         padding: 5px 0;   
  9.         position: absolute;   
  10.         top: 0;   
  11.         left: 0;   
  12.         border: solid 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.         display: none; /* hide all <li> items */  
  19.         margin: 0;   
  20.     }   
  21.     .nav .current {   
  22.         display: block; /* show only current <li> item */  
  23.     }   
  24.     .nav a {   
  25.         display: block;   
  26.         padding: 5px 5px 5px 32px;   
  27.         text-align: left;   
  28.     }   
  29.     .nav .current a {   
  30.         background: none;   
  31.         color: #666;   
  32.     }   
  33.   
  34.     /* on nav hover */  
  35.     .nav ul:hover {   
  36.         background-image: none;   
  37.     }   
  38.     .nav ul:hover li {   
  39.         display: block;   
  40.         margin: 0 0 5px;   
  41.     }   
  42.     .nav ul:hover .current {   
  43.         background: url(images/icon-check.png) no-repeat 10px 7px;   
  44.     }   
  45.   
  46.     /* right nav */  
  47.     .nav.rightright ul {   
  48.         left: auto;   
  49.         rightright: 0;   
  50.     }   
  51.   
  52.     /* center nav */  
  53.     .nav.center ul {   
  54.         left: 50%;   
  55.         margin-left: -90px;   
  56.     }   
  57.   
  58. }  
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22