एक अच्छी तरह से डिज़ाइन किया गया और कार्यात्मक नेविगेशन बार (नेवबार) किसी भी वेबसाइट के प्रमुख घटकों में से एक है। यह उपयोगकर्ताओं के लिए एक रोडमैप के रूप में कार्य करता है, जिससे उन्हें विभिन्न पृष्ठों पर नेविगेट करने में मदद मिलती है। एक नेवबार आमतौर पर एक वेबपेज के शीर्ष पर स्थित होता है, जहां उपयोगकर्ताओं को मुख्य लिंक तक पहुंचने के लिए यह हमेशा दिखाई देता है। इस लेख में, हम देखेंगे कि HTML और CSS का उपयोग करके एक आकर्षक और कार्यात्मक CSS नेविगेशन बार कैसे बनाया जाए। हम यह सुनिश्चित करने के लिए विभिन्न तकनीकों पर भी चर्चा करेंगे कि नेवबार पृष्ठ के शीर्ष पर बना रहे।

आप इस नेविगेशन बार का लाइव डेमो देख सकते हैं और CodePen पर पूर्वावलोकन पर जाकर इसकी कार्यक्षमता का पता लगा सकते हैं।

निम्नलिखित कोड स्निपेट एक लोगो, मेनू आइटम और कॉल-टू-एक्शन बटन के साथ एक प्रतिक्रियाशील नेविगेशन बार के निर्माण को दर्शाता है। यहां HTML और CSS कोड है:

संहिता को तोड़ना
आइए विस्तार से देखें कि HTML और CSS का उपयोग करके नेवबार कैसे बनाया जाता है।

HTML संरचना

कोड का HTML भाग सीधा है। इसमें एक नेविगेशन तत्व होता है जिसमें तीन मुख्य घटक होते हैं:

• एक लोगो (एक छवि)
• क्लिक करने योग्य लिंक के साथ एक **मेनू **सूची (होम, हमारे बारे में, हमसे संपर्क करें, ब्लॉग)
• एक **बटन **जो कॉल टू एक्शन के रूप में कार्य करता है (अभी कॉल करें)
• संरचना एक तत्व के अंदर लपेटी गई है, जो नेविगेशन बार के लिए एक कंटेनर के रूप में कार्य करती है।

लोगो एक टैग का उपयोग करके बनाया गया है। मेनू एक अव्यवस्थित सूची है (

)

सीएसएस के साथ स्टाइलिंग

जादू सीएसएस अनुभाग में होता है, जहां हम नेविगेशन बार के लेआउट और स्वरूप को परिभाषित करते हैं। आइए कुछ प्रमुख तत्वों पर चर्चा करें।

बैकग्राउंड और बॉडी स्टाइलिंग
शरीर में एक ढाल पृष्ठभूमि होती है जो नीले (#2258c3) से गुलाबी (#fd2df3) में परिवर्तित हो जाती है। ऊंचाई 100vh (व्यूपोर्ट ऊंचाई) पर सेट है, जो सुनिश्चित करती है कि पृष्ठभूमि पूरी स्क्रीन भरती है, और पृष्ठ के चारों ओर अवांछित स्थान से बचने के लिए कोई मार्जिन नहीं है।

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

नेवबार स्टाइलिंग

नेवबार में एक सफेद पृष्ठभूमि और गोल कोने हैं (बॉर्डर-त्रिज्या: 30px)। पैडिंग और मार्जिन नेवबार के अंदर और बाहर दूरी बनाते हैं। डिस्प्ले: फ्लेक्स प्रॉपर्टी नेवबार को एक फ्लेक्सबॉक्स बनाती है, जो इसके चाइल्ड तत्वों के क्षैतिज संरेखण की अनुमति देती है। justify-content: space-between यह सुनिश्चित करता है कि लोगो, मेनू और बटन समान दूरी पर हों।

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

नेवबार को शीर्ष पर ठीक करना

नेविगेशन बार की प्रमुख कार्यक्षमताओं में से एक स्क्रॉल करते समय पृष्ठ के शीर्ष पर रहना है। इसे प्राप्त करने के लिए, हम स्थिति का उपयोग करते हैं: अचल संपत्ति। यह स्क्रॉलिंग की परवाह किए बिना नेवबार को शीर्ष (top: 0) पर स्थिर रहने की अनुमति देता है। इसके अतिरिक्त, z-index: 9999 यह सुनिश्चित करता है कि नेवबार हमेशा पृष्ठ पर अन्य तत्वों से ऊपर हो।

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

मेनू आइटम और अन्तरक्रियाशीलता

मेनू आइटम को .menu वर्ग पर डिस्प्ले: फ्लेक्स का उपयोग करके क्षैतिज रूप से प्रदर्शित किया जाता है। आइटमों को मार्जिन के माध्यम से रिक्ति दी गई है, और प्रत्येक आइटम को डिफ़ॉल्ट सूची शैली और पैडिंग को हटाने के लिए स्टाइल किया गया है। मेनू आइटम के लिंक में कोई टेक्स्ट सजावट नहीं है और उन्हें बोल्ड फ़ॉन्ट और गहरे रंग से स्टाइल किया गया है।

लिंक पर होवर प्रभाव नीले पृष्ठभूमि रंग से मेल खाने के लिए रंग बदलता है (#2258c3), एक दृश्य संकेत प्रदान करता है कि लिंक इंटरैक्टिव है।

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

बटन स्टाइलिंग

बटन को नीले रंग की पृष्ठभूमि (#2258c3), सफेद टेक्स्ट और गोल कोनों (सीमा-त्रिज्या: 20px) के साथ स्टाइल किया गया है। होवर करने पर, पृष्ठभूमि में ग्रेडिएंट से मेल खाने के लिए पृष्ठभूमि गुलाबी (#fd2df3) में बदल जाती है।

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

नेवबार को हमेशा शीर्ष पर कैसे रखें

सीएसएस के साथ पृष्ठ के शीर्ष पर हेडर को ठीक करने के लिए, आप शीर्ष: 0 के साथ स्थिति: निश्चित संपत्ति का उपयोग करते हैं। यह सुनिश्चित करता है कि उपयोगकर्ता स्क्रॉल करते समय नेवबार शीर्ष पर रहेगा। यहां बताया गया है कि इसे कोड में कैसे लागू किया जाता है:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}