Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Drop-down menus are a frequently used tool on the Web. They are easy to design, they de- clutter the page, and they allow you to jam a lot of menu content into a small space. Unfortunately, they're also hard to access unless you're using a mouse. This used to be a problem only for people who navigated websites with a keyboard. But it's increasingly becoming an issue for people who navigate websites with other devices, such as phones and tablets, because neither have the hover state of the mouse. Nevertheless, if you want to make a drop- down menu, you have to make sure you at least make it accessible.
If you want good navigation, there are better ways of doing it. That said, in some situations you have to build a drop-down menu. If you do, you also should always make it accessible. And I'll show you how to do exactly that. In our example site, we currently have a single-level menu. It's right at the top here and it has just one level of content. But what if we wanted to add a drop-down, let's say to this Flowers button, and make it into Products, and then it would drop down to say Flowers, Plants, Trees, and whatever.
There are several steps to this process. First, we have to make the actual menu items themselves. And that's done in the markup. So I'll go to my example project, open the index page, find my menu, and then add some new menu items. I said I wanted to change the Flowers menu item to be Products and then add new items underneath it. So I'll go in here and change the Flowers one first, to Products, and then I want to add more menu items.
So what I'm going to do is extend that list item and create a new unordered list underneath it. I'll just close my unordered list two, so that I know I won't break anything. And then inside here, I can now make new list items with the new menu items. Just so you see what's going on here, we have an unordered list with list items in it, and then within the second list item, there's a new unordered list with its own list items.
This is how a structured drop-down menu works. It's a nested menu within a menu. Now I need to make the actual menu items. So I'll just follow the same structure I have up here. I'll start with an anchor and then an href and then a title, I'll close the anchor, and then say Flowers. And then I'll just copy this line, and make another item and another item, and then the second one will be Plants, and the third one will be Trees.
I'll save this and reload my page in my browser, and you'll see everything now breaks. That's because right now all the list items are using the same styles. And the styles currently say that each unordered list is on its own line, which means the first unordered list is up here. And then we have a new unordered list that breaks everything, and then we have the continuation of the first one down here. To fix this and make the drop- down work, we need to use some CSS. Now this is not a CSS course, so I prepared the file for you to make this happen.
You can go in and dissect it later if you want to. If you go to the Exercise Files for this lesson, you'll find a single file called stylesDropDown, so just copy that one and dump it into your folder. And then we'll go back to our index page and call that new style sheet. So I'll copy the styles.css call, and add the new call underneath it. This is really important, because we want to call the drop-down styles after the styles, because the drop-down styles will override the other styles.
We'll call the stylesDropDown, save it, and now when I reload my page, you'll see that the menu has shifted to the left. And when I hover over Products, we get a drop-down menu. But this drop-down menu is not currently very accessible. It's kind of finicky, and more importantly, if I use the Tab key on my keyboard, I can't access it. I'll show you just that. If I hit the Tab key, I can access the main menu items.
The issue of drop-down menus and accessible drop-down menus has been a challenge for web developers for a long time. In 2003, Patrick Griffiths and Dan Webb published an article called Suckerfish Dropdowns on A List Apart. And it has become the de facto standard for how to make CSS drop-down menus on the web. There are many versions of the Suckerfish menu available, but after a lot of research, I found that the most accessible one is one called Superfish. The Superfish menu is built around accessibility and activates keyboard accessibility to your drop-down menus.
It's also very easy to implement, and I'll show you exactly how to do it now so you can use it for this website and for all future websites you build. To get the Superfish menu, simply click Download & Support and download Superfish. I'll extract this to my Desktop, so I have it for future reference, and then I'll take a look at what's in here.
There's the standard jQuery library, there's a library called hoverIntent, and there's one called Superfish. So if I go back to the Superfish folder, I see there's a folder called js. And under here we have five libraries, of which I need three. So I'll open My Accessible Site, create new folder call it js, and then copy in hoverIntent, jquery, and superfish. There is one final step.
And you see that, when I hover over it, there's a slight animation and delay on the menu items. And when I use my Tab key to navigate the page now, it opens the drop-down menu and I can see what I'm doing. And that's kind of the whole point. Now I can actually use my drop-down menu with my keyboard. What you're seeing here is the most basic functionality of the Superfish menu. The Superfish menu is very advanced and it has a lot of different types of menus you can build and a lot of different functionality with a lot of different styling.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 99279 Viewers
80 Video lessons · 141839 Viewers
59 Video lessons · 60221 Viewers
52 Video lessons · 73333 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.