如何创建：响应式顶部导航栏

学习如何使用 CSS 和 JavaScript 创建响应式顶部导航栏。

创建响应式顶部导航菜单

第一步 - 添加 HTML：

<!-- 加载图标库以在小屏幕上显示汉堡菜单（横杠） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">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()">
    <i class="fa fa-bars"></i>
  </a>
</div>

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

第二步 - 添加 CSS：

/* 为顶部导航添加黑色背景色 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* 设置导航栏中链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  पैडिंग: 14पिक्सल 16पिक्सल;
  text-decoration: none;
  font-size: 17px;
}
/* माउस हॉवर पर लिंक का रंग बदला जाता है */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* वर्तमान पृष्ठ को उभारने के लिए एक गतिविधि क्लास जोड़ी जाती है */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* छोटे स्क्रीन पर खोलने और बंद करने के लिए उपयोग की जाने वाली लिंक को छुपाया जाता है */
.topnav .icon {
  display: none;
}

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

/* जब स्क्रीन चौड़ाई 600 पिक्सल से कम होती है, तो पहले लिंक ("होम") के अलावा सभी लिंकों को छुपाया जाता है। लिंक (चिह्न) को खोलने और बंद करने के लिए दिखाया जाता है */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* जब उपयोगकर्ता चिह्न पर क्लिक करता है, तो जावास्क्रिप्ट topnav पर "responsive" क्लास जोड़ता है। यह क्लास topnav को छोटे स्क्रीन पर बेहतर दिखाता है (लिंक को ऊर्ध्व दिशा में दिखाता है न कि आड़ी दिशा में) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

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

/* जब उपयोगकर्ता चिह्न पर क्लिक करता है, तो topnav पर "responsive" क्लास जोड़े या हटाए जाता है */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

स्वयं अभ्यास करें

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

तालीम:CSS नेविगेशन टॉगल