Web Development Tools that Enlighten
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 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.
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.
|Size of page with Dreamweaver menu||31,261 bytes|
|Size of Page with show/hide layers||2,576 bytes|
But wait! That's not the worst part! View the source code of the Dreamweaver
see if anywhere you can find an actual link to the popupmenu2.html page. See
if you can find a simple
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
<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
Page Rendering Speed
But wait! There's more! The Dreamweaver menu behavior will place a call to
mmLoadMenus() function right after the opening
If your menu is large and complex (contains a lot of menu items), then there
begins to render. So, in addition to the longer download time because of the
processor cycles and causing your page to render slower even after it has all
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!
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?
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
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
- Thierry's TJK Popups
- YoungPup's ypSlideOutmenus
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.
However, there is a required reading assignment before you start. See my How to Implement Popup Menus page.