如何创建：响应式底部导航菜单

学习如何使用 CSS 和 JavaScript 创建响应式底部导航菜单。

创建响应式底部导航栏

第一步 - 添加 HTML：

<div class="navbar" id="myNavbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

带有 class="icon" 的链接用于在小屏幕上打开和关闭导航栏。

第二步 - 添加 CSS：

/* 将导航栏放在页面底部，并使其固定 */
.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* 设置导航栏中链接的样式 */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Palitan ang kulay ng link kapag nasa hover state. */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Magdagdag ng asul na kulay ng background sa aktibong link. */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}
/* Itago ang link na dapat buksan at isara ang navigation bar sa maliit na screen. */
.navbar .icon {
  display: none;
}

Magdagdag ng media query:

/* Kapag ang lapad ng screen ay mas maliit sa 600 pixel, itago ang lahat ng link kaysa sa unang link ("Home") at ipakita ang link na may .icon para buksan at isara ang navigation bar. */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
/* Kapag pinindot ng user ang icon, gamitin ang JavaScript para magdagdag ng klase "responsive" sa navigation bar. */
Ang klase na ito ay gumawa ng navigation bar na mas mabuti sa maliit na screen (sa pagpapakita ng link na vertical sa halip na horizontal) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Tatlong hakbang - Magdagdag ng JavaScript:

/* Kapag pinindot ng user ang icon, pag-alis at pagdagdag ng klase "responsive" sa navigation bar sa pagitan ng pagpalit */
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  }
    x.className = "navbar";
  }
}

亲自试一试

相关页面

教程：CSS 导航栏