How to Implement Popup Menus

Popup Menu

I know you've seen them. The menus that, when you pass your mouse cursor over something, a menu drops down with a number of different links. They seem to be all the rage right now and, in some cases, they are an appropriate method for site navigation. However, depending on how they are implemented, there can be problems.

There are a number of differing methods of creating such a menu. The one thing they all have in common is JavaScript. In some cases, the JavaScript is only used to show or hide a positioned page element that contains the actual links. In other cases, JavaScript is also used to write the links. Think about this: what happens to the user agent or browser, if it doesn't have JavaScript enabled. Remember this: search engine spiders are user agents without JavaScript. The answer to both is, those pages linked in the popup menu will be inaccessible to users without JavaScript (arguably somewhere around 10%) and to search engines unless you provide alternate means of linking to those pages.

Okay, now that I've said that, let me explain that the purpose of this page is not to teach you how to create popup menus. There are a lot of places to learn that. There are many more, but here are three good free ones:

There are also some commercial products that simplify menu creation. A couple that I recommend are:

Please note that I am not affiliated with any of the above companies in any way. I receive no remuneration from those companies, nor do I provide support for their products. I recommend them because I believe their products are of superior quality.

The above links will show you how to create good menus. You can still have the above problems, depending upon how you implement them. All of the above menus use a link as a "trigger" to display and/or hide various menus. Many people will say that you create the link that is used as a "null" link. Don't do it! Now, by null link, they mean to type some bogus string into the link property of the text, like #, or javascript:;, or javascript:void(0). Of those, the last is the most syntactically correct, but it still means that your link does nothing. That means that user agents without JavaScript will not be able to activate the menu. The good news is that the three examples above do not use JavaScript to actually write the menu. The menu is comprised of actual links contained in hidden page elements. Why is that good? Because even though the page element is hidden, search engine spiders will see it and be able to index the pages that are linked to by the menu.

However, the problem of actual user accessibility remains. That 10% surfing the net with JavaScript turned off, or using devices that do not support JavaScript will still be unable to use the links.

So what do we do about that? The answer is simple, but it requires a little extra work on your part. Instead of a useless "null" link, create a real link that goes to a real page. Consider this site. There are "buttons" at the top of the page that serve as links to pages that contain links to specific pages within general areas of the site. If I had popup menus on this site, and someday I may, I would keep those pages and the links to them. That way, if a user does not have JavaScript enabled, they can still follow the link to a page that contains the links that would be displayed in the popup menu.

Organize your site's content into logical groups. Create your navigation in such a manner that it's clear where the links go, then create a few extra pages that will substitute for the popup when it's not available for whatever the reason. This will make your site accessible and will allow search engines to properly index your site.