कैसे बनाया जाता है: शीर्ष नेविगेशन बार

CSS से शीर्ष नेविगेशन बार कैसे बनाएं जाता है यह जानें。

शीर्ष नेविगेशन बार बनाएं

पहला कदम - HTML जोड़ें：

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

दूसरा कदम - CSS जोड़ें：

/* शीर्ष नेविगेशन को काला पृष्ठभूमि रंग जोड़ें */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* नेविगेशन बार में लिंक के शैली सेट करें */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* माउस स्थिति में लिंक का रंग बदलें */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* चालू/वर्तमान लिंक को रंग जोड़ें */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

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

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

पाठ्यक्रम:कैसे करें: रिस्पांसिव टॉप नेविगेशन बनाएं

पाठ्यक्रम:CSS नेविगेशन बार