HTML/CSS 移动版导航栏

Question

我正在制作一个技术博客网站，并希望它在移动设备上也能看起来不错。我想知道您如何使所有选项卡（例如主页、博客、关于、联系人）在桌面上像这样彼此相邻：

但是在移动设备上，我想要这样的菜单的三行：

Answer 1

使用媒体查询。

媒体查询允许您根据媒体参数修改样式。这是一个 CSS 媒体查询的示例，当呈现视口的宽度小于 720 像素时，它将应用于导航元素。

/* 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;
  }
}

更多信息read about media queries on W3Schools or read about media queries on 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>

访问 jsfiddle link CSS 它很长，但我在 css

中添加了注释

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

Answer 3

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

HTML/CSS 移动版导航栏

Navbar in HTML/CSS for mobile

html

css

mobile

navbar