将菜单转换为小屏幕下拉菜单

The Five Simple Steps 网站有一个响应式设计，带有一个巧妙的功能。 当浏览器窗口变窄时，右上角的菜单会从常规的链接行转换为下拉菜单。

当您在小屏幕上（此处显示 iPhone）并点击下拉菜单时，您将获得一个界面，用于选择一个选项，每个选项都很大且易于选择。

这确实比一个小链接更容易选择要前往的地方。 是的，它是两步而不是一步，但这是有争议的，因为您可能必须放大才能点击正确的链接。

HTML 代码

这两个菜单的 HTML 代码不同。 据我所知，您无法将<select> 和<option> 元素样式化为<a> 或反之。 所以我们需要两者。 您只需将两者都放在标记中。 这就是 Five Simple Steps 所做的

<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; 隐藏选择菜单。 这实际上对可访问性有利，因为它会将冗余菜单隐藏在屏幕阅读器中。

nav select {
  display: none;
}

然后，使用媒体查询，我们将在某个特定宽度进行切换。 您可以自行确定（这里有一些标准断点）。

@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 的情况下都能正常工作，我有一篇关于此的文章。

演示和下载

查看演示   下载文件

视频

如果您是从某个无法调整浏览器大小并进行操作以查看我们到底在谈论什么的地方阅读本文，那么这里有一个简短的视频示例。

变体

• 同一个概念的变体，其中有嵌套菜单，它会根据父/子关系在选择中创建选项组。
• 带有破折号的子菜单 由 Daryn St. Pierre 创建