如何使用CSS3制作响应式导航菜单的方法

互联网
爬山和爱情一样，爬得越高摔得越惨，同样，爱得越深，受伤的几率越大。人的一生全靠奋斗，唯有奋斗才能成功。让我们一起来奋斗吧！相信自己，我们会谱出一段美妙的音符，来唱出我们心中的那首歌！

关于使用响应式设计来创建一个手机导航栏，之前我曾经写过一个好代码教程。现在我发现了一种新的方式，可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐。不像前面一个好代码教程中需要点击来展开，这个菜单可以在hover时展开，对用户更为友好。它也包含一个指示器来显示当前激活的菜单项。这种方式可以工作于所有的移动和桌面浏览器中，甚至包括IE。

演示

目标

　　这个好代码教程的目标是向你展示如何把一个传统的列表菜单在更小的屏幕上转换为可伸展的菜单。

这种方式对于下图这种有很多链接的导航来说非常有用。你可以把所有的按钮转换为一个优雅的伸展条。

HTML代码

下面是导航的HTML代码。<nav>标签用于创建伸展条，包含绝对定位的css属性。我会在稍后解释这一点，current类表示当前激活的菜单链接。

CSS Code复制内容到剪贴板
  1. <navclass="nav">
  2. <ul>
  3. <liclass="current"><arel="nofollow noopener noreferrer" href="#">Portfolio</a></li>
  4. <li><arel="nofollow noopener noreferrer" href="#">Illustration</a></li>
  5. <li><arel="nofollow noopener noreferrer" href="#">WebDesign</a></li>
  6. <li><arel="nofollow noopener noreferrer" href="#">PrintMedia</a></li>
  7. <li><arel="nofollow noopener noreferrer" href="#">GraphicDesign</a></li>
  8. </ul>
  9. </nav>

　　CSS

　　导航的CSS样式（桌面视图）非常简单，所以我不打算介绍细节。请注意我为导航的<li>元素指定了display:inline-block来取代float:left。这样我们可以通过为<ul>元素设定text-align属性来控制菜单按钮居左、居中或者居右对齐。

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

　　居中与居右对齐

　　像上面所提到的一样，你可以使用text-align属性更改按钮的对其方式。

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

IE支持

IE8或更早的版本不支持HTML5的<nav>标签和媒介查询（MediaQuery）。我们需要引用css3-mediaqueries.js（或者respond.js）和html5shim.js来提供支持。如果你不打算使用html5shim.js，可以把<nav>标签用<div>代替。

XML/HTML Code复制内容到剪贴板
  1. <!--[ifltIE9]>
  2. <scriptsrc="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
  3. <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  4. <![endif]-->

　　响应式设计

　　现在是最有意思的部分-使用媒介查询创建响应式菜单。如果你对响应式设计不了解，可以看看我之前关于响应式设计和媒介查询的文章。

　　在600像素的节点上，我将导航元素设置为相对定位，所以我能把顶部的<ul>菜单列表样式替换为绝对定位。通过设定display:none我隐藏所有的<li>元素，但是保留了当前激活的<li>项。然后当鼠标hover在导航栏上时，我将所有的<li>元素设置为display:block（这会产生伸展列表）。我添加了一个勾选图标在当前栏目上来展示激活状态。对于居中和居右对齐的菜单，使用position的left和right属性来定位<ul>列表。可以根据演示来查看最终结果。

CSS Code复制内容到剪贴板
  1. @mediascreenand(max-width:600px){
  2. .nav{
  3. position:relative;
  4. min-height:40px;
  5. }
  6. .navul{
  7. width:180px;
  8. padding:5px0;
  9. position:absolute;
  10. top:0;
  11. left:0;
  12. border:solid1px#aaa;
  13. background:#fffurl(images/icon-menu.png)no-repeat10px11px;
  14. border-radius:5px;
  15. box-shadow:01px2pxrgba(0,0,0,.3);
  16. }
  17. .navli{
  18. display:none;/*hideall<li>items*/
  19. margin:0;
  20. }
  21. .nav.current{
  22. display:block;/*showonlycurrent<li>item*/
  23. }
  24. .nava{
  25. display:block;
  26. padding:5px5px5px32px;
  27. text-align:left;
  28. }
  29. .nav.currenta{
  30. background:none;
  31. color:#666;
  32. }
  34. /*onnavhover*/
  35. .navul:hover{
  36. background-image:none;
  37. }
  38. .navul:hoverli{
  39. display:block;
  40. margin:005px;
  41. }
  42. .navul:hover.current{
  43. background:url(images/icon-check.png)no-repeat10px7px;
  44. }
  46. /*rightnav*/
  47. .nav.rightrightul{
  48. left:auto;
  49. rightright:0;
  50. }
  52. /*centernav*/
  53. .nav.centerul{
  54. left:50%;
  55. margin-left:-90px;
  56. }
  58. }

以上就是如何使用CSS3制作响应式导航菜单的方法。无事心不空，有事心不乱，大事心不畏，小事心不慢。更多关于如何使用CSS3制作响应式导航菜单的方法请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例