
By kjSage
CSS dropdown menu that is accessible to screen readers and keyboard users. Tab through the dropdown link and the links will show up as if hovered over. Shift-tabbing will always tab to the previous top-level link if already focusing a top-level link.
I've only coded in support for the first level of a dropdown, though duplicating the structure of the nested list and adding appropriate CSS should be fairly straightforward as the CSS is labeled. Too lazy to code in a specific mobile style for this, may update later.
The dropdown will work in all major browsers. IE lacks :focus-within support, but the hover will still work. Edge will need the dropdown links hovered over in order to tab through them, otherwise it will skip to the next top-level link. Nothing to be done about either case except to use a modern browser that supports the newest CSS standards.
Working example and code can also be found on my codepen, here.
<style> /******************************** * CSS Dropdown with keyboard support * by kjSage @ ATF, CTTW, RPGD, RPGI, ShadowPlay, Sourced & WeCode ********************************/ /* The Dropdown Menu */ #menu { width: 100%; text-align: center; padding: 0; background: #000; display: block; z-index: 2; } /* List element styles */ #menu ul, #menu li { list-style: none; padding: 0; margin: 0; display: inline-block; } #menu li { padding: 5px 0px; } /* Main menu links */ #menu a:link, #menu a:visited, #menu a:active { text-decoration: none; color: #fff; padding: 5px 7px; font-weight: bold; position: relative; z-index: 2; } #menu a:hover, #menu a:focus { background-color: #374c5d; color: #fff; text-decoration: underline; } /* The submenu links container*/ .subdrop { background: var(--bg-color); height: 0; border-top: 0; min-width: 100%; left: 0; margin: 0; position: absolute; text-align: left; top: 100%; visibility: hidden; height: 1px; overflow: hidden; z-index: 10; } /* Dropdown Parent Link Style */ .droplink { display: inline-block; min-width: fit-content; position: relative; } /* List elements within the dropdown */ .subdrop li { display: block!important; padding: 0!important; } /* Links within the dropdown list */ .subdrop a { display: block; padding: 12px 20px; white-space: nowrap; } /* Allows links to show on hover/focus and through keyboard navigation via focus-within */ .droplink:hover .subdrop { visibility: visible; height: auto; z-index: 11; } /* Separate these to avoid IE completely ignoring the css above */ .droplink:focus-within .subdrop { visibility: visible; height: auto; z-index: 11; } </style> <nav role="navigation" id="menu" aria-label="Main menu"> <ul> <li class="droplink"><a href="" aria-haspopup="true">Dropdown 1</a> <ul class="subdrop" aria-label="Main Links Sub Navigation"> <li><a href="">Sub Link 1</a></li> <li><a href="">Sub Link 2</a></li> <li><a href="">Sub Link 3</a></li> <li><a href="">Sub Link 4</a></li> </ul> </li> <li><a href="">Test Link 1</a></li> <li><a href="">Test Link 2</a></li> <li><a href="">Test Link 3</a></li> </ul> </nav>
By kjSage
By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.