कैसे बनाएं: स्थिर मेनू

स्थिर ऊपरी मेनू को बनाना कैसे

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

<div class="navbar">
  <a href="#home">घर</a>
  <a href="#news">समाचार</a>
  <a href="#contact">संपर्क</a>
</div>
<div class="main">
  <p>कुछ लेख कुछ लेख कुछ लेख कुछ लेख..</p>
</div>

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

स्थिर ऊपरी मेनू को बनाने के लिए इसे इस्तेमाल करें position:fixed और top:0ध्यान दें कि स्थिर मेनू आपके अन्य सामग्री को ओवरलैप कर सकता है। इसे समाधान करने के लिए सामग्री के ऊपर एक समान या अधिक ऊपरी बीच-घिरा (margin-top) जोड़ें。

/* नेविगेशन बार */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* नेविगेशन बार को नियंत्रित स्थान पर रखें */
  top: 0; /* नेविगेशन बार को पृष्ठ के ऊपरी छोर पर रखें */
  width: 100%; /* पूरे चौड़ाई */
}
/* नेविगेशन बार के अंदर के लिंक */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* माउस हॉवर पर पृष्ठभूमि को बदलें */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* मुख्य सामग्री */
.main {
  margin-top: 30px; /* अनुवांश ऊपरी बीच-घिरा से सामग्री ओवरलैप से बचने के लिए */
}

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

स्थिर निचले बार को बनाना कैसे

स्थिर निचले बार को बनाने के लिए इसे इस्तेमाल करें position:fixed और bottom:0：

/* नेविगेशन बार */
.navbar {
  position: fixed; /* नेविगेशन बार को नियंत्रित स्थान पर रखें */
  bottom: 0; /* नेविगेशन बार को पृष्ठ के निचले छोर पर रखें */
  width: 100%; /* पूरे चौड़ाई */
}
/* मुख्य सामग्री */
.main {
  margin-bottom: 30px; /* अनुवांश बाहरी बीच-घिरा से सामग्री ओवरलैप से बचने के लिए */
}

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

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

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