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

学习如何使用 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;
}
/* माउस हूवर पर लिंक का रंग बदलें */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* सक्रिय लिंक के लिए हरी पृष्ठभूमि रंग जोड़ें */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}
/* छोटे स्क्रीन पर नेविगेशन बार को खोलने और बंद करने के लिए शामिल लिंक को छुपाएं */
.navbar .icon {
  display: none;
}

मीडिया क्वेरी जोड़ें:

/* जब स्क्रीन चौड़ाई 600 पिक्सल से कम होती है, तो पहले लिंक ("होम") के अलावा सभी लिंकों को छुपाएं। नेविगेशन बार को खोलने और बंद करने के लिए शामिल लिंक (.icon) को दिखाएं */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
/* जब उपयोगकर्ता चिह्न पर क्लिक करता है, तो जावास्क्रिप्ट का उपयोग करके "responsive" क्लास नेविगेशन बार में जोड़ें */
यह क्लास नेविगेशन बार को छोटे स्क्रीन पर बेहतर दिखाती है (लिंक को खंडी रूप से दिखाती है, नहीं कि सीधे रूप से) */
@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;
  }
}

तीसरा - जावास्क्रिप्ट जोड़ें:

/* जब उपयोगकर्ता चिह्न पर क्लिक करता है, नेविगेशन बार में "responsive" क्लास जोड़ने और हटाने के बीच परिवर्तन करना */
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  अन्यथा {
    x.className = "navbar";
  }
}

स्वयं प्रयोग करें

संबंधित पृष्ठ

शिक्षा:CSS नेविगेशन टॉगल