CSS Navigation Bar

किसी बड़े shopping mall में entering की कल्पना करें। अगर कोई directory maps, directories, या ceiling से लटके signs नहीं हैं, तो आप अपनी favorite stores ढूँढते हुए खो जाएँगे। एक navigation bar (या navbar) वही mall directory map है। यह आपके webpage के top पर structured links की row है जो आपके सभी pages और tools को साफ़ तरीके से जोड़ती है। links की एक simple list को style करके, आप एक साफ़, responsive navigation menu बना सकते हैं जो users के browse करते समय आपके page के top पर visible बना रहे।

In this page:

Semantic List Structure
inline-block के साथ Horizontal Navigation
Flexbox के साथ Horizontal Navigation
Persistent Fixed Navigation Bars
Active Link Indicators

Syntax

css

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li a {
  display: block;
  padding: length;
}

Semantic List Structure

एक professional navigation bar एक साफ़ HTML structure से शुरू होता है। links की एक list को semantic nav और ul tags में wrap करके, आप search engines और screen readers को exactly बताते हैं कि आपकी site कैसे structured है।

Note: अपने navigation menus को screen readers के लिए readable और accessible बनाने के लिए semantic markup इस्तेमाल करें।

Warning: कभी भी plain, non-semantic div tags से navigation menus न बनाएँ, क्योंकि search bots उन्हें नज़रअंदाज़ कर देंगे।

उदाहरण: Semantic List Structure

css

<style>
nav ul { list-style: none; margin: 0; padding: 0; background: #333; }
nav li { display: inline-block; }
nav a { display: block; padding: 10px 16px; color: #fff; text-decoration: none; }
</style>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

inline-block के साथ Horizontal Navigation

Default रूप से, list items (li) block elements हैं जो vertically stack होते हैं। आप उनकी display property को inline-block set करके उन्हें एक साफ़ menu bar में horizontally align कर सकते हैं।

Note: पूरे link box को clickable बनाने के लिए menu item anchors को custom padding के साथ block display पर set करें।

Warning: सुनिश्चित करें कि आपके inline-block list items margins से अलग किए गए हैं ताकि वे cramped न हों।

उदाहरण: Horizontal Navigation with inline-block

css

<style>
li {
  display: inline-block;
  margin-right: 10px;
}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Flexbox के साथ Horizontal Navigation

Flexbox इस्तेमाल करना navigation menus बनाने का modern, standard तरीका है। parent ul tag पर display: flex set करके, आप elements को साफ़ तरीके से साथ-साथ align कर सकते हैं और justify-content जैसी properties से उनकी spacing control कर सकते हैं।

Note: अपने brand logo और menu links को screen के opposite ends पर धकेलने के लिए अपने flex navbar पर justify-content: space-between इस्तेमाल करें।

Warning: सही spacing सुनिश्चित करने के लिए अपनी flex properties को parent ul tag पर लागू करें, individual list items पर नहीं।

उदाहरण: Horizontal Navigation with Flexbox

css

<style>
ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
li {
  background: steelblue;
  padding: 8px 12px;
}
li a {
  color: white;
}
</style>
<ul>
  <li>Logo</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Persistent Fixed Navigation Bars

user के scroll करने पर अपने navigation bar को screen के top पर visible रखने के लिए, आप इसकी position को fixed set कर सकते हैं और इसकी width को 100% पर lock कर सकते हैं। यह आपकी site को लंबे pages पर भी navigate करना आसान बनाए रखता है।

Note: fixed header को अपने content को cover करने से रोकने के लिए अपने body container में top padding जोड़ें।

Warning: सुनिश्चित करें कि आपके fixed headers responsive हैं ताकि वे mobile devices पर बहुत ज़्यादा screen space cover न करें।

उदाहरण: Persistent Fixed Navigation Bars

css

<style>
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: darkorange;
  color: white;
  padding: 10px;
  text-align: center;
}
.content {
  margin-top: 60px;
}
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin-bottom: 10px;
}
</style>
<nav>Always visible while scrolling</nav>
<div class="content">
  <p>Scroll down to see the navbar stay fixed. Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <p>Paragraph 4.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 6.</p>
  <p>Paragraph 7.</p>
  <p>Paragraph 8.</p>
</div>

Active Link Indicators

जब users आपकी site navigate करते हैं, तो उन्हें यह देखना चाहिए कि वे इस समय किस page पर हैं। आप current page के menu link पर एक custom class (जैसे class="active") लागू करके और उसे unique colors के साथ style करके एक active link indicator बना सकते हैं।

Note: एक साफ़, modern tab design बनाने के लिए अपने active class links पर border-bottom indicators इस्तेमाल करें।

Warning: सुनिश्चित करें कि pages navigate करते समय आपकी active class styles dynamically update होती हैं।

उदाहरण: Active Link indicators

css

<style>
a.active {
  border-bottom: 2px solid blue;
}
</style>
<a href="#" class="active">Home</a>
<a href="#">About</a>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Opacity Next Lesson → CSS Vertical Navbar