CSS नेविगेशन बार

लगभग हर वेबसाइट में एक navigation bar होता है — ऊपर की तरफ links की पंक्ति जो आपको Home, Courses, About या Contact पर ले जाती है। इसके बिना visitor पहले ही पेज पर रास्ता भटक जाएगा। Navigation bar links की एक HTML सूची ही है, जिसे CSS से तब तक सजाया जाता है जब तक वह bullet list की बजाय एक सही menu न लगे।

Diagram — देखें, यह सब कैसे जुड़ता है

तरकीब आसान है: एक <ul> लें, उसके bullets और spacing हटा दें, उसके items को पंक्ति में लगा दें, और उसके अंदर के links को padding और background रंग वाले blocks की तरह style करें। एक बार यह आधार बन जाए, तो आप hover effect जोड़ सकते हैं, मौजूदा पेज को चिह्नित कर सकते हैं, और dropdown menu भी बना सकते हैं।

सूची को बार में बदलना

<nav> element के अंदर एक <ul> से शुरू करें। list-style-type: none से bullets हटाएँ और margin: 0 और padding: 0 से डिफ़ॉल्ट spacing हटाएँ। फिर <ul> को गहरा background रंग दें और display: flex से flex container बना दें — list के items अपने आप पंक्ति में लग जाते हैं।

Syntax — एक horizontal बार

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}
ul.nav a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}

हर link display: block है, इसलिए padding वाला पूरा हिस्सा clickable होता है — सिर्फ अक्षर नहीं। Phone पर यह बहुत मायने रखता है, क्योंकि उँगली mouse pointer से कहीं चौड़ी होती है।

Hover और active पेज

जब mouse किसी link के ऊपर से गुज़रे, तो link को प्रतिक्रिया देनी चाहिए। :hover स्यूडो-क्लास उसका background रंग बदल देता है, जिससे visitor को पता चलता है "यहाँ click कर सकते हो"। जिस पेज पर visitor अभी है, उसे एक खास class मिलती है, जिसे आमतौर पर active कहते हैं, और उसका रंग अलग होता है — अक्सर हरा — ताकि visitor को हमेशा पता रहे कि वह कहाँ है।

ul.nav a:hover {
  background-color: #111;
}
ul.nav a.active {
  background-color: #04aa6d;
}

Dropdown menu — hover पर खुलने वाला menu

Dropdown एक छोटा menu है जो किसी एक link पर hover करते ही खुलता है, जैसे "Courses" पर hover करते ही HTML, CSS और Python दिखने लगें। यह दो बातों से काम करता है: parent <li> position: relative होता है, और submenu position: absolute होता है और display: none से छिपा रहता है। Parent पर :hover वाला नियम उसे display: block कर देता है, और submenu नीचे खुल जाता है।

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

आम गलतियाँ

• list-style-type: none भूल जाना — bullets रह जाते हैं और बार सादी सूची जैसा दिखता है।
• <ul> पर margin: 0 और padding: 0 भूल जाना — browser की डिफ़ॉल्ट spacing बार को किनारों से दूर धकेल देती है।
• <li> की बजाय <a> को style करना — सिर्फ अक्षर clickable बनते हैं, और padding वाला हिस्सा कुछ नहीं करता।
• Parent पर position: relative के बिना dropdown को position करना — submenu अपने link के नीचे की बजाय पेज पर किसी भी जगह दिखता है।
• Hover का रंग normal रंग जैसा ही रखना — visitor को कोई feedback नहीं मिलता कि link पर click किया जा सकता है।

याद रखें

• Nav bar एक <ul> है जिसके bullets और spacing हटा दिए गए हैं और जिसे पंक्ति में लगाया गया है।
• Links को padding के साथ display: block बनाएँ, ताकि पूरा हिस्सा clickable हो।
• :hover link का background बदलता है; .active मौजूदा पेज को चिह्नित करता है।
• Dropdown display: none से छिपता है और :hover पर दिखता है।
• Dropdown के parent को position: relative और menu को position: absolute चाहिए।

याद रखने की तरकीब: बुलेट हटाओ, पंक्ति में लगाओ, लिंक को ब्लॉक बनाओ — नेविगेशन तैयार।

उदाहरण समझिए

• ul.nav — पूरा menu: bullets और डिफ़ॉल्ट spacing हटाई गई, गहरा background, और display: flex ताकि items पंक्ति में बैठें।
• ul.nav a — हर link सफेद text और चौड़ी padding वाला block है, इसलिए रंगीन पूरा हिस्सा clickable है।
• ul.nav a:hover — mouse किसी link के ऊपर से गुज़रते ही उसका background गहरा हो जाता है, जिससे दिखता है कि उस पर click किया जा सकता है।
• ul.nav a.active — Home link पर active class है, इसलिए वह हरा है और visitor जानता है कि वह किस पेज पर है।
• .dropdown-content — Courses का submenu display: none और position: absolute से छिपा है; .dropdown:hover .dropdown-content mouse के Courses पर आते ही उसे दिखा देता है।