CSS Dropdowns

किसी restaurant के digital ordering kiosk तक चलकर जाने की कल्पना करें। Default रूप से, screen साफ़ है, सिर्फ major food categories दिखा रही है। लेकिन जब आप अपनी उंगली Drinks पर hover करते हैं, तो एक hidden side menu खुल जाता है, soda, juice, और water options दिखाते हुए। CSS dropdowns वही hidden side menus हैं। ये sub-menus, lists, या instructions को एक अकेले parent element के नीचे छुपाकर आपकी site को साफ़ रखते हैं, हover पर उन्हें automatically दिखाते हुए।

In this page:

Dropdown Concept
Relative Parents के अंदर Absolute Positioning
Hover Content Panel को Style करना
Navigation Bars के अंदर Dropdowns
Accessible Focus-Within Dropdowns

Syntax

css

.dropdown .dropdown-content {
  display: none;
  position: absolute;
}
.dropdown:hover .dropdown-content {
  display: block;
}

Dropdown Concept

एक dropdown menu दो हिस्सों से बना होता है: एक visible trigger element (जैसे कोई button या link) और एक hidden content container। हम parent element की hover state इस्तेमाल करते हैं ताकि content container की display property को none से block में toggle किया जा सके।

Note: अपने trigger text के अंदर एक साफ़ arrow symbol (जैसे ▾) इस्तेमाल करें ताकि users को पता चले कि एक dropdown menu मौजूद है।

Warning: जो dropdown menus सिर्फ hover पर काम करते हैं वे mobile और touch-screen users के लिए खोलना मुश्किल हो सकता है।

उदाहरण: The Dropdown Concept

css

<style>
.dropdown-content {
  display: none;
  background: lightyellow;
  padding: 8px;
  border: 1px solid #ccc;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">Hidden until hovered</div>
</div>

Relative Parents के अंदर Absolute Positioning

अपने dropdown menu को खुलने पर बाकी page content को नीचे धकेलने से रोकने के लिए, आपको इसकी position property को absolute set करना होगा। यह sub-menu को normal page flow से हटा देता है और उसे दूसरे elements के ऊपर freely float होने देता है।

Note: अपने absolute sub-menu को सही तरीके से anchor करने के लिए हमेशा parent dropdown container पर position: relative set करें।

Warning: सुनिश्चित करें कि आपके dropdown content में एक defined background color और एक high z-index है ताकि यह page elements के पीछे render न हो।

उदाहरण: Absolute Positioning inside Relative Parents

css

<style>
.dropdown {
  position: relative;
}
.dropdown-content {
  position: absolute;
  display: none;
  background: lightyellow;
  padding: 8px;
  border: 1px solid #ccc;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">Floats without pushing content down</div>
</div>

Hover Content Panel को Style करना

आप साफ़, multi-page navigation menus बनाने के लिए अपने dropdown menu के अंदर standard anchor links को group कर सकते हैं। इन links को full-width block displays इस्तेमाल करने के लिए style करना उन्हें click करना आसान बनाता है।

Note: पूरी link row को clickable बनाने के लिए अपने dropdown content के अंदर link anchors को padding के साथ block display पर set करें।

Warning: सुनिश्चित करें कि आपके sub-menu links readable रहने के लिए high color contrast रखते हैं।

उदाहरण: Styling the Hover Content Panel

css

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: lightyellow;
  border: 1px solid #ccc;
  width: 150px;
}
.dropdown-content a {
  display: block;
  padding: 8px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </div>
</div>

Navigation Bars के अंदर Dropdowns

आप dropdown sub-menus को सीधे अपने horizontal navigation bars के अंदर integrate कर सकते हैं, जिससे आप tools या secondary pages के groups को एक ही साफ़ menu button के नीचे nest कर सकते हैं।

Note: अपने navigation items और dropdown triggers को साफ़ तरीके से साथ-साथ align करने के लिए float: left या display: inline-block इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपके navigation dropdowns high z-index values रखते हैं ताकि वे main page elements के पीछे render न हों।

उदाहरण: Dropdowns inside Navigation Bars

css

<style>
nav {
  background: #eee;
  padding: 8px;
}
nav li {
  display: inline-block;
  position: relative;
}
nav .dropdown-content {
  display: none;
  position: absolute;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
nav li:hover .dropdown-content {
  display: block;
}
</style>
<nav>
  <ul>
    <li>Tools
      <div class="dropdown-content">Sub Item</div>
    </li>
  </ul>
</nav>

Accessible Focus-Within Dropdowns

जो dropdown menus सिर्फ mouse hover पर खुलते हैं वे उन keyboard-only users के लिए inaccessible हैं जो Tab key इस्तेमाल करके navigate करते हैं। :focus-within pseudo-class इस्तेमाल करके, आप सुनिश्चित कर सकते हैं कि जब कोई user dropdown block के अंदर किसी भी element में tab करे तो आपके dropdowns automatically खुलें।

Note: अपने dropdowns को पूरी तरह accessible और responsive बनाने के लिए :hover और :focus-within selectors को combine करें।

Warning: keyboard focus के लिए design न करना आपके interactive menus को visually impaired screen-reader users के लिए पूरी तरह unusable बना देता है।

उदाहरण: Accessible Focus-Within Dropdowns

css

<style>
.dropdown-content {
  display: none;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <a href="#">Menu</a>
  <div class="dropdown-content"><a href="#">Item</a></div>
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Horizontal Navbar Next Lesson → CSS Advanced Dropdowns