JavaScript Menus - Good or Evil?

Every budding young web designer wants to have pop-up menus on their site. Pop-up menus are the "cool" thing to have. In point of fact, a web site of significant size can enhance the user's ability to navigate the site by using pop-up menus. Of course, being a budding young web designer, they don't have a clue about how to build them. Fortunately, there are a number of tools that can simplify the task ... but at what price?

Let me begin by saying that any pop-up menu on a web site requires JavaScript in order to function. However, there are different ways of implementing that pop-up menu functionality. Our discussion here relates to the difference between a menu that is entirely done in JavaScript as opposed to a menu that simply uses JavaScript to reveal or hide page content. The difference is important!

Let me also preface this discussion by saying right up front that I'm not trying to discourage the use of pop-up menus. What I am going to tell you is that there is a right and a wrong way to implement pop-up menus. I'll try to steer you toward a method that is accessible and is easy to build, implement and maintain.

File Sizes

Let's examine the built-in pop-up menu functionality of my favorite web design tool, Macromedia Dreamweaver. While I'll use the word Dreamweaver here, the same issues all apply to menus built in the Dreamweaver companion product, Fireworks. The two products produce identical menus.

See (page will open in a new browser window) popupmenu.html. On that page is a single item Menu. When you mouse over the word "Menu" a Dreamweaver popup menu will be displayed with a single menu item that links to another, very similar page using a simple show/hide layer technique. The menu link on that page goes back to the version with the Dreamweaver pop-ups. For the sake of illustration, I put all the Dreamweaver popup menu code into the page instead of using an external .js file for part of it like Dreamweaver normally does.

Now just think about this for a minute. Your entire page, including all HTML, images, externally linked files like style sheets and JavaScript files should not exceed 45-50k in order to give dial-up users a reasonable download time. The page with the Dreamweaver menu is 31k and contains only a single menu item and this is before we even start to add any real content.

Link Visibility

But wait! That's not the worst part! View the source code of the Dreamweaver menu page. Search all through the 31, 254 bytes of clunky JavaScript code to see if anywhere you can find an actual link to the popupmenu2.html page. See if you can find a simple <a href="popupmenu2.html">. You won't find it because it isn't there. That 31k of JavaScript has to execute to create the link. Guess what. Search engines don't execute JavaScript. When a search engine indexes the page with the Dreamweaver menu they don't see any valid links, so they don't index any other pages. Most screen readers won't see any links either. Nor will Dreamweaver's link management routine. Move or rename a file and you have to go back and rebuild your menu because Dreamweaver won't do it automatically. It can't see those links. When a search engine looks at a page with an all JavaScript menu, it sees something like this:

<script>
   ignore everything here
</script>

Menu trigger (link to nothing)

When a search engine looks at a page with a pop-up menu constructed by showing and hiding layers, it sees something like this:

<script>
   ignore everything here
</script>
		
Menu trigger (link to nothing)

Link to another page

Note that last line above, in red. That's a crucial difference! Since the search engine can see that link, it can follow it and index the linked page. The way that search engines work is that they index your home page. If they find any links in that page, they go to those pages and index those pages as well. If they don't see any links in that page, they stop right there. If all your links are buried in JavaScript or (heaven forbid) Flash, they don't see them and don't index any more pages.

Page Rendering Speed

But wait! There's more! The Dreamweaver menu behavior will place a call to the mmLoadMenus() function right after the opening <body> tag. If your menu is large and complex (contains a lot of menu items), then there is a lot of JavaScript that has to execute before your page begins to render. So, in addition to the longer download time because of the excessive amount of code, you've got all this other JavaScript execution taking processor cycles and causing your page to render slower even after it has all downloaded.

Customization & Maintenance

But wait! There's still more! Want the menu to look differently? Dreamweaver offers a few choices on customizing the look of the menus. Using a show/hide layer, you have the full power of CSS to style them any way you want!

Okay, I mentioned that Dreamweaver's link management function does not see links embedded in JavaScript. The fact that it cannot see and manage these links means that they don't work well with templates. You can build the menu in a non-templated page, then copy and paste the code into a template, but you have to go through that same rigmarole every time something changes in the menu! If you use templates, this is a maintenance nightmare!

Appearance & Functionality

Still not satisfied? There's even more! <sigh>I feel like I'm peddling the Popeil Pocket Fisherman.</sigh> Look at the Dreamweaver menu using a Gecko browser like NN6+, Mozilla, Firebird, or Firefox. Instead of the cursor displaying the pointing finger like a normal link, or even the arrow, it displays the I-bar like when you mouse over plain text. Call me anal, but that just bugs me. It doesn't look or act like a link should. How should I even know that I can click it?

Other Products

I've talked about the built-in Dreamweaver menu system here. Be aware that there are a LOT of other menu systems around that suffer these same issues. The file sizes and the methods may differ slightly. They may, or may not, suffer the same cursor display issues, but the crucial thing is whether or not the links actually appear in the source code as links. I'm not going to try to list them all here, but some of the more often mentioned products are the OpenCube QuickMenu Pro, Xara Menu Menu Maker and the SoThink DHTMLMenu. What I wll tell you is, if you're considering a menu system, find a demo page for the menu. Look at the source code and find out if the actual links are in the source. If one of the menu items links to "somepage.html", then look in the source code for <a href="somepage.html">. If it isn't there, then the menu is flawed.

What to Do

So now you see the light. You understand why you should not use the Dreamweaver menu, but you don't know how to build a menu without it. What do you do? Fear not! There is an answer ... an easy one, if you'll just take an hour to learn the technique. Here are three good free ones:

• Project Seven's Simple VII Menus
• Project Seven's PVII Dropdown Menus
• YoungPup's ypSlideOutmenus

There are also some commercial products that simplify menu creation. One that I recommend is Project Seven's Pop Menu Magic.

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.

However, there is a required reading assignment before you start. See my How to Implement Popup Menus page.