响应式下的下拉菜单

Dear 丶 2022-08-06 03:15 164阅读 0赞

原文：[Convert a Menu to a Dropdown for Small Screens][]

译文：转换菜单为下拉式来适应小屏幕

译者：dwqs

[Five Simple Steps][] （ps：称FSS）网站有一个优雅的响应式设计的特点，当浏览器窗口的变小时，右上角的菜单从规则的一行转换成一个下拉菜单。（PS：原文写于2011年，FSS网站的设计已经改变，具体可以参考原文的截图。）

**HTML**

两种菜单的HTML代码是不同的，因为到目前为止，你不能把<select>和<option>的样式设计成<a>有一样的外观和行为，反之也不能。所以二者都需要设计，而你做的就是把二者的标记都写出来。FSS的做法如下：

<nav> 
    
      <ul> 
        <li><a href="/" class="active">Home</a></li> 
        <li><a href="/collections/all">Books</a></li> 
        <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
        <li><a href="/pages/about-us">About Us</a></li> 
        <li><a href="/pages/support">Support</a></li> 
      </ul> 
      
      <select> 
        <option value="" selected="selected">Select</option> 
        
        <option value="/">Home</option> 
        <option value="/collections/all">Books</option> 
        <option value="/blogs/five-simple-steps-blog">Blog</option> 
        <option value="/pages/about-us">About Us</option> 
        <option value="/pages/support">Support</option> 
      </select> 
    
    </nav>

继续下一步

**CSS**

默认我们利用display:none隐藏select菜单，这个很好接受。对于屏幕的阅读者，将隐藏的多余的菜单。

nav select {
      display: none;
    }

然后利用媒体查询，针对一些特定宽度的突然变化。你可以根据实际情况来设计（[标准断点参考][Link 1]）

@media (max-width: 960px) {
      nav ul     { display: none; }
      nav select { display: inline-block; }
    }

**现在需要维护两个菜单吗？**

恩，这是一个需要担心的问题。或许你的菜单是动态创建的并且你不能很好的控制的输出，或许你有技术处理菜单但想确保不会偶然同步出现两个菜单。能找到的一种方式是从一开始就动态创建下拉菜单。利用JQuery，很容易就能实现：

// Create the dropdown base
    $("<select />").appendTo("nav");
    
    // Create default option "Go to..."
    $("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to..."
    }).appendTo("nav select");
    
    // Populate dropdown with menu items
    $("nav a").each(function() {
     var el = $(this);
     $("<option />", {
         "value"   : el.attr("href"),
         "text"    : el.text()
     }).appendTo("nav select");
    });

然后确保下拉菜单能够运用

$("nav select").change(function() {
      window.location = $(this).find("option:selected").val();
    });

**下拉菜单是不是有点唐突？**

有一点。小屏幕大多数是移动设备，并且他们对JavaScript的支持很友好，因此并不用太担心。但是如果你想确保在没有JavaScript的情况下也能让它正常工作的话，可以参考我的另一篇文章：[I have an article about that][].

效果演示：[http://jsfiddle.net/Web\_Code/j810jta8/embedded/result/][http_jsfiddle.net_Web_Code_j810jta8_embedded_result]

打包下载：[http://download.csdn.net/detail/u011043843/8257615][http_download.csdn.net_detail_u011043843_8257615]

原文首发：[http://www.ido321.com/1348.html  
][http_download.csdn.net_detail_u011043843_8257615]

[Convert a Menu to a Dropdown for Small Screens]: http://css-tricks.com/convert-menu-to-dropdown/
[Five Simple Steps]: http://www.fivesimplesteps.com/
[Link 1]: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
[I have an article about that]: http://css-tricks.com/4064-unobtrusive-page-changer/
[http_jsfiddle.net_Web_Code_j810jta8_embedded_result]: http://jsfiddle.net/Web_Code/j810jta8/embedded/result/
[http_download.csdn.net_detail_u011043843_8257615]: http://download.csdn.net/detail/u011043843/8257615