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…


This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey

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…


This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey


Print Share Comment Cite Upload Translate Updates
APA

a11y with Lindsey | Sciencx (2018-12-04T00:00:00+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 ,<https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/>
VANCOUVER
a11y with Lindsey | Sciencx - » Create an accessible dropdown navigation. [Internet]. [Accessed ]. 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 . 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: ]
rf:citation
» Create an accessible dropdown navigation | a11y with Lindsey | Sciencx | https://www.scien.cx/2018/12/04/create-an-accessible-dropdown-navigation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts