HTML/CSS中用于移动的Navbar

Question

我正在制作一个高科技博客网站，并希望使它看起来很好的移动也。我想知道你是如何让所有的选项卡(如家，博客，关于，联系)像桌面上这样相互毗邻：

​

​

但在手机上，我希望有这样一个菜单的三行：

​

​

​

​

Answer 1

使用媒体查询。

媒体查询允许您根据媒体参数修改样式。下面是一个CSS查询的示例，当呈现视图的宽度小于720 to时，该查询将应用于nav元素。

/* CSS outside media query will execute like normal. */
nav {
  background-color: black;
}

/* 
 * CSS inside the media query will be applied to the nav element 
 * when the viewport has a width less then 720px. The CSS here will
 * overwrite the CSS above.
 */
@media only screen and (max-width: 720px) {
  nav {
    background-color: blue;
  }
}

有关更多信息，请参见阅读关于W3Schools的媒体查询或阅读关于Mozilla的媒体查询。

Answer 2

我通常使用输入类型复选框和标签来实现这一点。一般的想法是，如果输入检查，标签将显示标签将是一个X，它将是一个汉堡包按钮，当不检查。这是一个示例https://jsfiddle.net/v0qjsh7p/。

<input type="checkbox" class="navigation__checkbox" id="navi">
<label for="navi" class="navigation__button">
  <span class="navigation__icon">&nbsp;</span>
</label>
<nav class="navigation__nav">
  <ul class="navigation__list">
    <li class="navigation__item">Home</li>
    <li class="navigation__item">Contact</li>
    <li class="navigation__item">About</li>
  </ul>
</nav>

访问CSS的jsfiddle链接，它很长，但我在css中添加了注释

这只是专注于创建按钮。您可以自己完成导航，但是它会让您在更改按钮的同时使用复选框系统隐藏和显示导航。

Answer 3

使用媒体查询它将对你有很大的帮助