Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the previous movie we introduced a drop-down menu to the site and we also made it accessible. As you can see, we now have a drop-down item that we can access with the mouse and you can access it with your keyboard. If we tab through the items, we can open the drop-down menu and access each of these items. But I also said that I personally don't think that drop-down menus are a good idea and I'll explain to you why. Drop-down menus, though they look pretty, are actually quite inaccessible, even if you have the access of a mouse or a keyboard and the drop-down menu works for keyboard, because you can't see the contents and more importantly drop-down menus tend to lead you to more information about something.
Ideally, if you want to create a drop- down menu, you should really be thinking about doing something else instead, and I'll show you what I mean. This is a website we created for a South Asian wedding company called Sapna in Toronto. They had a very interesting menu design that made it impossible for us to create a drop-down menu. As you can see, these menu items are staggered, so a drop-down menu would look rather weird. They also didn't want a drop-down menu that would cover any of their content. So what we did instead was create landing pages for the sections that would have drop-down menus.
For example, rather than having a drop- down menu under Services that would then display the different services, when you click on the Services button, you get to the Services landing page and the Services landing page has two sections. It has the main section that gives you a synopsis of each of the different services. There are four services in this case with a short breakdown of what it is, with a title, a short description, and then a button to see more. In addition, we added a list of services in the sidebar, and this addresses the two main ways of dealing with the drop-down issue.
Rather than creating a drop-down menu, you should create a landing page that showcases all the options that you would've put under the drop menu in more detail, and then, if you wish to always display the contents that would have been in the drop-down menu, you should put it somewhere, for instance, in the sidebar, so that those menu items are always available. By doing that you're making those items available at all times. So no one needs to know that there may or may not be more items under a drop-down menu. It's always there and you can see it. But more importantly, because of the way the web works now, landing pages are far more valuable than drop-down menus.
If someone is searching for services online and they land on a single page that lists out all the services in one place and then you can click for more information, they are far more likely to get there than if they landed on the front page of a site and then had to find a drop-down menu, and then find the item they're looking for. This concept is based on the idea that people don't land on your front page, they land where they're most likely to find the information they're looking for, and therefore this type of landing page works exceptionally well. Just to give you another example of how you can implement this landing page idea, in addition to the Services page that had the drop-down menu with the four services items, we also initially have a drop-down menu for the About page, because this company has several different pages listed under About.
So rather than creating one About page, and then a bunch of other pages that were only accessible through the drop- down, we made a landing page for About, and at the bottom of it we have two additional pages you can get to through navigation. So when you're thinking of making a drop-down menu, think about this. Is there a better way of doing it if I instead create a landing page that directs the people to those sub pages? And can I add those drop-down menu items to my sidebar? You'll remember from earlier in the course that I showed you how easy it is to create new sidebar menus in your sidebar.
So why not, instead of putting your drop-down menu here, simply add the drop-down menu items to your sidebar to make them always accessible for everyone.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 86641 Viewers
80 Video lessons · 135961 Viewers
59 Video lessons · 54700 Viewers
52 Video lessons · 68595 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.