用于移动设备的 HTML/CSS 导航栏答案

【问题标题】：Navbar in HTML/CSS for mobile用于移动设备的 HTML/CSS 导航栏
【发布时间】：2021-01-18 15:39:36
【问题描述】：

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

但在移动设备上，我希望拥有这样的菜单的三行：

【问题讨论】：

你有没有尝试过？

标签： html css mobile navbar

【解决方案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;
  }
}

【讨论】：

【解决方案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 中添加了 cmets

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

【讨论】：

【解决方案3】：

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

【讨论】：