当前位置：Gxlcms > html代码 > CSS：响应式下的折叠菜单(条纹式)_html/css_WEB-ITnose

CSS：响应式下的折叠菜单(条纹式)_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：39人阅读

原文： CSS: Responsive Navigation Menu

译文：CSS：响应式导航菜单

译者：dwqs

写在之前，关于如何制作响应式的下拉菜单：响应式下的下拉菜单

之前，我写了一篇关于怎么制作响应式的移动导航的教程。现在，我发现了一个新技巧，不用使用JavaScript就能实现响应式菜单，而是使用HTML 5清晰的语义标记。

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

首先，看看Demo的效果：Demo

一、 目的

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

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

二、Nav HTML标记

  1. <nav class="nav">    <ul>        <li class="current">Portfolio</li>        <li>Illustration</li>        <li>Web Design</li>        <li>Print Media</li>        <li>Graphic Design</li>    </ul></nav>

三、CSS

  1. /* nav */.nav {    position: relative;    margin: 20px 0;}.nav ul {    margin: 0;    padding: 0;}.nav li {    margin: 0 5px 10px 0;    padding: 0;    list-style: none;    display: inline-block;}.nav a {    padding: 3px 12px;    text-decoration: none;    color: #999;    line-height: 100%;}.nav a:hover {    color: #000;}.nav .current a {    background: #999;    color: #fff;    border-radius: 5px;}

四、居中和右对齐

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

  1. /* right nav */.nav.right ul {    text-align: right;}/* center nav */.nav.center ul {    text-align: center;}

五、IE的支持

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

  1. <!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></ script>    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></ script><![endif]?></script></pre>  </p>  <p><strong>六、响应式</strong></p>  <p>  现在有趣的部分来了??媒体查询菜单的响应性。如果你对响应式设计不熟悉，可以阅读之前我写的关于responsive design （后续翻译）and  media query的文章。</p>  <p>  在600 px断点，我把nav元素设置成相对定位，这样，我就能对ul元素进行绝对定位了。通过display:none，我隐藏了所有的li元素，但保持当前的li元素以块元素显示。然后，当鼠标悬浮于nav元素时，将所有li添加display:block.为了标记当前的li元素，我会添加一个图标。对于居中和右对齐，对定位的ul元素使用left和right属性。看看最终的Demo效果：</p>  <p class="sycode">   <pre class="brush:php;toolbar:false">@media screen and (max-width: 600px) {    .nav {        position: relative;        min-height: 40px;    }        .nav ul {        width: 180px;        padding: 5px 0;        position: absolute;        top: 0;        left: 0;        border: solid 1px #aaa;        background: #fff url(images/icon-menu.png) no-repeat 10px 11px;        border-radius: 5px;        box-shadow: 0 1px 2px rgba(0,0,0,.3);    }    .nav li {        display: none; /* hide all <li> items */        margin: 0;    }    .nav .current {        display: block; /* show only current <li> item */    }    .nav a {        display: block;        padding: 5px 5px 5px 32px;        text-align: left;    }    .nav .current a {        background: none;        color: #666;    }    /* on nav hover */    .nav ul:hover {        background-image: none;    }    .nav ul:hover li {        display: block;        margin: 0 0 5px;    }    .nav ul:hover .current {        background: url(images/icon-check.png) no-repeat 10px 7px;    }    /* right nav */    .nav.right ul {        left: auto;        right: 0;    }    /* center nav */    .nav.center ul {        left: 50%;        margin-left: -90px;    }    }</script></pre>  </p>  <p>  相关博文推荐：</p>  <h3>  10个响应式设计的导航菜单源码：http://www.shejidaren.com/10-responsive-navigation-tutorials.html</h3>  <h3>Creating a CSS3 Responsive Menu：http://www.onextrapixel.com/2012/08/27/creating-a-css3-responsive-menu/</h3> Animenu响应式导航设计教程：  http://red-team-design.com/animenu-a-responsive-dropdown-navigation-made-with-sass/  <p>  Demo：http://red-team-design.com/wp-content/uploads/2013/02/animenu-demo.html</p>  <p><br /> </p>  <p>原文首发：                    </div>
  2.                   
  3.  
  4.                     <div class="">
  5.                         <ul class="m-news-opt fix">
  6.                             <li class="opt-item">
  7.                                 <a href='/htmldaima-272179.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">大家都用什么html编辑器_html/css_WEB-ITnose</p></a>
  8.                             </li>
  9.                             <li class="opt-item ta-r">
  10.                                  <a href='/htmldaima-272181.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">IE无法调整那些使用px作为单位的字体大小_html/css_WEB-ITnose</p></a>
  11.                             </li>
  12.                         </ul>
  13.                     </div>
  14.                     
  15.                     
  16.                     
  17.                     
  18.                 </div>
  19.               
  20.                     </div>
  21.                 
  22.                   
  23.                     <div class="g-title fix">
  24.                         <h2 class="title-txt">人气教程排行</h2>
  25.                     </div>
  26.                     <div class="m-rank u-dashed mb40">
  27.                         <ul>
  28.  <li class="rank-item">
  29.                                 <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  30.                                     <span class="g-art-count fr">230次</span>
  31.                                     <span class="g-sort-num top">1</span>
  32.                                    如何生成一个调查问卷_html/css_WEB-ITnose                                </a>
  33.                             </li>
  34.   
  35.   
  36.   <li class="rank-item">
  37.                                 <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  38.                                     <span class="g-art-count fr">230次</span>
  39.                                     <span class="g-sort-num second">2</span>
  40.                                    在页面直接显示日历_html/css_WEB-ITnose                                </a>
  41.                             </li>
  42.   
  43.   
  44.   <li class="rank-item">
  45.                                 <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank">
  46.                                     <span class="g-art-count fr">230次</span>
  47.                                     <span class="g-sort-num third">3</span>
  48.                                    如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作                                </a>
  49.                             </li>
  50.   
  51.   
  52. <li class="rank-item">
  53.                                 <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank">
  54.                                     <span class="g-art-count fr">229次</span>
  55.                                     <span class="g-sort-num ">4</span>
  56.                                    关于列表标记的详细介绍                                </a>
  57.                             </li>
  58.   
  59.   
  60. <li class="rank-item">
  61.                                 <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank">
  62.                                     <span class="g-art-count fr">229次</span>
  63.                                     <span class="g-sort-num ">5</span>
  64.                                    cssborder-bottom（指定下边线的样式、宽度及颜色）                                </a>
  65.                             </li>
  66.   
  67.   
  68. <li class="rank-item">
  69.                                 <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  70.                                     <span class="g-art-count fr">229次</span>
  71.                                     <span class="g-sort-num ">6</span>
  72.                                    html新闻详情页_html/css_WEB-ITnose                                </a>
  73.                             </li>
  74.   
  75.   
  76. <li class="rank-item">
  77.                                 <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  78.                                     <span class="g-art-count fr">229次</span>
  79.                                     <span class="g-sort-num ">7</span>
  80.                                    为何页面内容和网页边缘有空隙_html/css_WEB-ITnose                                </a>
  81.                             </li>
  82.   
  83.   
  84. <li class="rank-item">
  85.                                 <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  86.                                     <span class="g-art-count fr">228次</span>
  87.                                     <span class="g-sort-num ">8</span>
  88.                                    position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose                                </a>
  89.                             </li>
  90.   
  91.   
  92. <li class="rank-item">
  93.                                 <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank">
  94.                                     <span class="g-art-count fr">227次</span>
  95.                                     <span class="g-sort-num ">9</span>
  96.                                    htmlp标签怎么换行？htmlp标签添加br换行标签的应用                                </a>
  97.                             </li>
  98.   
  99.   
  100. <li class="rank-item">
  101.                                 <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank">
  102.                                     <span class="g-art-count fr">226次</span>
  103.                                     <span class="g-sort-num ">10</span>
  104.                                    HTML的<!DOCTYPE>标签                                </a>
  105.                             </li>
  106.   
  107.   
  108. <li class="rank-item">
  109.                                 <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank">
  110.                                     <span class="g-art-count fr">226次</span>
  111.                                     <span class="g-sort-num ">11</span>
  112.                                    html页面中友情链接怎么进行添加设置？（代码示例）                                </a>
  113.                             </li>
  114.   
  115.   
  116. <li class="rank-item">
  117.                                 <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank">
  118.                                     <span class="g-art-count fr">226次</span>
  119.                                     <span class="g-sort-num ">12</span>
  120.                                    form表单中属性及功能应用介绍汇总                                </a>
  121.                             </li>
  122.   
  123.   
  124. <li class="rank-item">
  125.                                 <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank">
  126.                                     <span class="g-art-count fr">226次</span>
  127.                                     <span class="g-sort-num ">13</span>
  128.                                    详解form标签中的method属性                                </a>
  129.                             </li>
  130.   
  131.   
  132. <li class="rank-item">
  133.                                 <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank">
  134.                                     <span class="g-art-count fr">226次</span>
  135.                                     <span class="g-sort-num ">14</span>
  136.                                    HTML5Canvas逼真烟雾效果js插件                                </a>
  137.                             </li>
  138.   
  139.   
  140. <li class="rank-item">
  141.                                 <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  142.                                     <span class="g-art-count fr">226次</span>
  143.                                     <span class="g-sort-num ">15</span>
  144.                                    页面跳转特效_html/css_WEB-ITnose                                </a>
  145.                             </li>
  146.   
  147.   
  148. <li class="rank-item">
  149.                                 <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  150.                                     <span class="g-art-count fr">226次</span>
  151.                                     <span class="g-sort-num ">16</span>
  152.                                    改变鼠标选中区域的样式。_html/css_WEB-ITnose                                </a>
  153.                             </li>
  154.   
  155.   
  156. <li class="rank-item">
  157.                                 <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  158.                                     <span class="g-art-count fr">225次</span>
  159.                                     <span class="g-sort-num ">17</span>
  160.                                    关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose                                </a>
  161.                             </li>
  162.   
  163.   
  164. <li class="rank-item">
  165.                                 <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  166.                                     <span class="g-art-count fr">225次</span>
  167.                                     <span class="g-sort-num ">18</span>
  168.                                    CSS3悬浮动画效果_html/css_WEB-ITnose                                </a>
  169.                             </li>
  170.   
  171.   
  172. <li class="rank-item">
  173.                                 <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  174.                                     <span class="g-art-count fr">225次</span>
  175.                                     <span class="g-sort-num ">19</span>
  176.                                    纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose                                </a>
  177.                             </li>
  178.   
  179.   
  180. <li class="rank-item">
  181.                                 <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
  182.                                     <span class="g-art-count fr">225次</span>
  183.                                     <span class="g-sort-num ">20</span>
  184.                                    body在默认情况下是具有margin外边距的_html/css_WEB-ITnose                                </a>
  185.                             </li>
  186.                         </ul>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.             <!-- / 教程内容页 -->
  191.
本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！