Question

我正忙着在第一个响应式移动网站上工作，其中一个要求是显示主导航（nav＆gt; ul＆gt; li），就好像它是移动视图的标签一样。我过去使用javascript来点击显示它或者根据客户端保持内联，但之前没有这个要求，所以我想知道是否有一种方法可以让CSS拥有{{ 1}}显示就像它是<li>标签一样。对于桌面视图，它只是内联显示。

Answer 1

您需要为导航设置单独的元素，并选择如下所示。

<select id="mobileNav">
    <option>your links</option>
</select>

和原始导航

<nav>
<ul>
<li>links</li>
</ul>
</nav>

现在，在CSS中，使用媒体查询根据屏幕宽度进行切换：

@media (max-width: 480px) {
   nav {
   display: none;
  }
   select#mobileNav {
    display: block;
  }
}

@media (min-width: 481px) {
   select#mobileNav {
     display: none;
   }
      nav {
     display: block;
   }
}

如何将导航ul列表显示为选择

1 个答案: