CSS Advanced Dropdowns

किसी Dropdown के अंदर एक Submenu Nest करना

एक multi-level dropdown किसी dropdown item के अंदर एक और absolutely positioned list रखकर बनाया जाता है, default रूप से hidden और सिर्फ तभी दिखाया जाता है जब वह specific item hover किया जाए।

हर nesting level को अपना खुद का position: relative parent चाहिए ताकि inner submenu सही item के relative position हो, outer menu के नहीं।

उदाहरण: Nesting a Submenu Inside a Dropdown

<style>
.item {
  position: relative;
  background: #eee;
  padding: 8px;
}
.submenu {
  display: none;
  position: absolute;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.item:hover .submenu {
  display: block;
}
</style>
<div class="item">
  Tools
  <div class="submenu">Sub Item</div>
</div>

बिना JavaScript के Click-Triggered Dropdowns

Touch devices पर hover मौजूद नहीं होता, इसलिए mobile support के लिए click-triggered dropdowns चाहिए। एक pure-CSS trick एक hidden checkbox को एक label के साथ जोड़ता है: label को click करने से checkbox toggle होता है, और checkbox checked होने पर एक sibling selector menu दिखाता है।

उदाहरण: Click-Triggered Dropdowns Without JavaScript

<style>
.menu {
  display: none;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
#toggle:checked ~ .menu {
  display: block;
}
</style>
<input type="checkbox" id="toggle" hidden>
<label for="toggle">Menu</label>
<div class="menu">Shown when the checkbox is checked</div>

Viewport से Overflow होने वाले Submenus को Position करना

जो submenu हमेशा दाईं तरफ़ खुलता है वह narrow viewports पर screen के edge से बाहर जा सकता है। एक common fix एक modifier class है, जो media query या JavaScript detection के ज़रिए लागू होती है, जो submenu की position को इसके बजाय बाईं तरफ़ खोलने के लिए flip कर देती है।

उदाहरण: Positioning Submenus That Overflow the Viewport

<style>
.submenu {
  position: absolute;
  left: 100%;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.submenu.flip {
  left: auto;
  right: 100%;
}
</style>
<div class="submenu flip">Opens leftward instead of running off-screen</div>

Submenu Reveal को Animate करना

एक instant display: none से display: block toggle के बजाय, submenu पर opacity और एक छोटे translateY transform को animate करना एक smoother, ज़्यादा polished fade-and-slide-down reveal बनाता है, जो production navigation menus में common है।

उदाहरण: Animating the Submenu Reveal

<style>
.item {
  position: relative;
  background: #eee;
  padding: 8px;
}
.submenu {
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
}
.item:hover .submenu {
  opacity: 1;
  transform: translateY(0);
}
</style>
<div class="item">
  Menu
  <div class="submenu">Fades and slides down</div>
</div>

Nested Menus के लिए Keyboard और Screen Reader Considerations

सिर्फ :hover से बने Multi-level dropdowns keyboard users के लिए unreachable हैं, क्योंकि Tab hover states को trigger नहीं करता। हर nesting level पर :focus-within को :hover के साथ combine करना, और JavaScript से maintained aria-haspopup/aria-expanded attributes इस्तेमाल करना, nested menus को properly accessible बनाता है।

उदाहरण: Keyboard and Screen Reader Considerations for Nested Menus

<style>
.item {
  background: #eee;
  padding: 8px;
}
.submenu {
  display: none;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.item:hover .submenu,
.item:focus-within .submenu {
  display: block;
}
</style>
<div class="item">
  <a href="#" aria-haspopup="true" aria-expanded="false">Menu</a>
  <div class="submenu"><a href="#">Item</a></div>
</div>