कैसे बनाएं: समान आकार वाला नेविगेशन बार

कैसे बनाएं: समान आकार वाले नेविगेशन लिंक

प्रतिसादी नेविगेशन बार बनाएं

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

/* नेविगेशन मेनू */
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

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

/* नेविगेशन मेनू के शैली को सेट करें */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* नेविगेशन लिंक */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* चार बराबर लिंक. अगर आपके पास दो लिंक हैं, तो 50% इस्तेमाल करें, तीन लिंक के लिए 33.33% इस्तेमाल करें, इस प्रकार ही. */
  text-align: center; /* यदि आप चाहते हैं कि टेक्स्ट केंद्रित हो */
}
/* माउस से हॉवर करने पर पृष्ठभूमि रंग जोड़ें */
.navbar a:hover {
  background-color: #000;
}
/* वर्तमान/सक्रिय लिंक के शैली को सेट करें */
.navbar a.active {
  background-color: #04AA6D;
}
/* प्रतिसादी क्षमता जोड़ें - 500 पिक्सल से कम आकार के स्क्रीन पर, नेविगेशन लिंक को ठेले से दिखाएं, नहीं कि साथ-साथ दिखाएं */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* यदि आप चाहते हैं कि टेक्स्ट छोटे स्क्रीन पर बाईं ओर समानता में हो */
  }
}

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

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

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