Create an accessible dropdown navigation

Content Warning: This blog post contains gifs. Want to see this in action? I created a 6 minute video collection! Go To My Free Egghead Collection Hover navigations are pretty simple to do without JavaScript, which is how I usually see them imp…

Content Warning: This blog post contains gifs. Want to see this in action? I created a 6 minute video collection! Go To My Free Egghead Collection Hover navigations are pretty simple to do without JavaScript, which is how I usually see them implemented. The HTML and CSS are pretty simple. HTML: CSS: Note: I have used the visually-hidden styling instead of display: none . This is important for accessibility, and you can read more in the link above. I’ve taken out some of the general styling, but this CSS is what contributes to the hover effect. However, as you can see with the gif below, it doesn’t work the same way if you use your tab key. Before we jump into coding, I wanted to share my approach to this problem. First, I want to solve the problem of opening the nav on not only…


Print Share Comment Cite Upload Translate
APA
a11y with Lindsey | Sciencx (2024-03-29T15:37:36+00:00) » Create an accessible dropdown navigation. Retrieved from https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/.
MLA
" » Create an accessible dropdown navigation." a11y with Lindsey | Sciencx - Tuesday December 4, 2018, https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/
HARVARD
a11y with Lindsey | Sciencx Tuesday December 4, 2018 » Create an accessible dropdown navigation., viewed 2024-03-29T15:37:36+00:00,<https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/>
VANCOUVER
a11y with Lindsey | Sciencx - » Create an accessible dropdown navigation. [Internet]. [Accessed 2024-03-29T15:37:36+00:00]. Available from: https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/
CHICAGO
" » Create an accessible dropdown navigation." a11y with Lindsey | Sciencx - Accessed 2024-03-29T15:37:36+00:00. https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/
IEEE
" » Create an accessible dropdown navigation." a11y with Lindsey | Sciencx [Online]. Available: https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/. [Accessed: 2024-03-29T15:37:36+00:00]
rf:citation
» Create an accessible dropdown navigation | a11y with Lindsey | Sciencx | https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/ | 2024-03-29T15:37:36+00:00
https://github.com/addpipe/simple-recorderjs-demo