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
CITATION GOES HERE CITATION GOES HERE
Select a language: