The ability to produce and alter menus is important for all development; but especially so for Web interfaces where the organization of a website is constantly in flux. So menus are also constantly being redesigned and refactored to reflect the latest website content. Given these circumstances, it is therefore surprising that the 3 most popular web development tools - Adobe GoLive, Macromedia Dreamweaver, and Microsoft Front Page barely have menu design tools in their IDEs. Sure there is a template here or a wizard there but nothing like desktop development tools such as Borland JBuilder or Microsoft Visual Studio, where menu designers are integral to the IDE.

Sure developers can take some of the excellent and free JavaScript menu code (see Hotscripts or DynamicDrive.com or our tutorials PanelMenu) and adopt them for a particular website. But this misses three key advantages of having a menu designer - a GUI-based, drag and drop DHTML menu design tool. A menu design tool gives you:
  1)the speed and accuracy of visual, WYSIWYG layout of your menus;
  2)the convenience of storing, retrieving, and changing your design many times;
  3)an outliner for the overall design of the website.
Lets emphasize the latter point. Working on medium to complex websites, a menu outline can provide a valuable alternate overview of the web design. And all three of the menu designers examined here provide excellent design windows that can be used to talk with clients either through screen shots or direct sessions.

"But the cost of a menu design tool is prohibitive ..." is one concern. However, each of the three menu designers costs less than $100. Using the $29 Selteco MenuMaker on one project more than redoubled the investment as Menumaker became the discussion point of reference for several, tough website re-design sessions. Each time the client said lets move this block of menus over here - it was done with a simple drag and drop operation. And when all of the design reworking was completed, a simple regenerate produced the osmenu.js javascript file and instantly all the web pages had the new menu design.

"But having to learn another design tool.." is another concern. The three tools chosen all have WYSIWYG menu design capabilities. In half a day, you are operational; in three days you have mastered the tool. And because each tool produces complete Javascript file(s) it is easy to integrate with Dreamweaver, Front Page, GoLive or whatever web development tool you are using. However be sure to check out our update on deployment issues with the three Menu Designers highlighted as here.

Three Menu Designers

The criteria by which the three menu design tools were chosen are fairly simple. The tool must cost less than $100US. It must have a WYSIWYG menu design capability. It must be able to store and retrieve that design for later modification and reuse. It must generate all the files and code necessary to operate the menus. It must be able to generate horizontal dropdown, vertical flyout , and button popout menus for all the major browsers. The three tools featured here - Extreeme SiteExpert, Selteco MenuMaker, and Likno AllWebMenus meet all of these criteria while each brings some unique capabilities to menu design. Other menuing tools are available - this is not an exhaustive list (see Hotscripts.com for other options) and if there is enough reader interest (mail us your menu design recommendation) then a follow up tutorial will be considered.

By laying out the key characteristics of the Menu Designers in tabular format, it is much easier to compare their capabilities and then discuss each ones particular strengths.

Selteco Menumaker

Scrunched between two powerhouse menu design tools, one might wonder what is the competitive advantage of the Selteco's MenuMaker besides the price of $29 for unlimited use? We would immediately add ease of use as a simple but effective menu designer. The screen shot shows two menus being edited where I am able to drag and drop menuitems (or complete submenus) between the two windows. This is quite useful when using one menu as a template for a new menu. But equally useful, Menumaker saves a lot of time when remodeling an existing menu - its simple to just drag and drop a whole branch into a new position. The one disadvantage - Menumaker only supports menus to 3 levels.

But Menumaker does allow precise and easily accessed control of menu fonts, colors, bordering, and other stylings.In fact, of all three menu designers, Selteco is the easiest to learn and use.Menumaker has another virtue - all of its code is contained in the JavaScript file - so even if the menus are changed extensively, only the JavaScript file is changed - very nicely modularized. So if your websites don't get too large and you are not into icons/images in your menus, Menumaker is cheap, fast and robustly easy to use.

Xtreeme SiteXpert

This menu designer is like the Energizer Bunny its features keep going and and going ... or better unfolding and unfolding. When you start SiteExpert a Layout Wizard guides you through five ways to create menus including two very powerful, automatic menu generators. One auto-generates menus given a www.website.address.com; the other auto-generates given the start idex.htm file on your local disk. The auto-generated menus are not perfect but they certainly do eliminate a lot of the grunt work for defining a site menu. The Pro edition takes this auto-generation to a new level as it auto generates a site map in tree or other structures.

In the SiteXpert menu designer there is Help plus an Assistant which guide users step by step through some of the difficult steps in creating a menu directly. Users work from a two pane designer - the tree menu of the evolving hierarchy of menus on the left and a property sheet for the current selected menuitem on the right. This is a versatile designer though it lacks the drag and drop features of Selteco's Menumaker. But SiteXpert more than makes up for this with its Options icon. Clicking on the Options reveals a very powerful tabbed dialog that lets users configure their evolving menu in style, dimension and format plus special behaviors. For example, under the Schemes tab, choose from over 4 dozen pre-designed horizontal and vertical menu templates. Or under the Style tab, choose a tree menu, dropdown list, a Yahoo-style portal/indented list among the different menu types or styles available in SiteXpert. In short, Xtreeme SiteExpert most likely can create your special menuing needs.

Don't like any of the 4 dozen template menus? Go into the Tools | DHTML Menu Studio and modify an existing menu template or create your own - see the screen shot above. There are again dozens of menu properties and features that users can control. SiteExpert starts out simple and easy to use; but then gradually unfolds and reveals more and more power to the web developer. And if you need dynamically generated menus, the Pro edition can serve those needs. However, on the deployment side SiteExpert has one deficiency - the code is not a simple one or two lines of <script> inclusion; but rather several lines of HTML code right in the <body> of the page. This creates problems when the menu is updated because then all pages containing the menu have to be updated as well. In contrast the Selteco menu is self contained in the JavaScript files making updates easier. Nonetheless, SiteExpert is not only a powerful, but also bargain-featured multi-site, cross-browser menu designer.

Likno AllWebMenus

If Xtreeme SiteXpert is so good what can Likno AllWebMenus do that is unique and helpful ? Well for starters AllWebMenus has the ability to create movable, drifty and position relative menus. Movable menus can be dragged and dropped by the end user anywhere on the browser screen. Drifty menus stay in the same relative position on the menu screen even after the user scrolls the screen down. Position relative menus stay in the same relative position no matter how the browser screen is resized. These are options not available in the other two designers. As well like Selteco Menumaker (but not SiteXpert), AllWebManus allows quick creation of tooltips for any or all menuitems.

So AllWebMenus has a number of unique tricks and features. But like Extreeme it is able to produce multiple menus per page that can be horizontal, vertical or button popout in design and nested to any depth. AllWebMenus adds the unique ability to produce horizontal submenus - the latest design fad. Also like SiteXpert it is able to incorporate images and icons into menuitems in a wide variety of ways. But perhaps the most useful feature of AllWebMenus is the ability to set the properties of complete menus or submenus or individual menuitems. This allows for a variety of menu innovations which the examples at the Likno site demo. However, on the deployment side, AllWebMenus uses several <script> tags including some that expose variables. This is not as bad as SiteExpert for when updates to the menus occur; but also it is not as clean as Selteco for websites that have menus included on every page. Also it is important to note that AllWebMenus has an addin for Front Page and a component for NetObjects Fusion web designer tools. In sum, AllWebMenus has a battery of unique menuing features that may just be deemed essential.

Summary

Menus and easy navigation is one of the key competitive advantages of the Web interface. In comparison to desktop applications which are stuck on a horizontal, dropdown menu paradigm; web designers can easily make horizontal dropdown, vertical flyout, or "place-it-anywhere" button popout menus. So being able to quickly produce various menus is a key competitive advantage that web developers will want to master. The three menu design tools allows developers not only to generate menus quickly but also to modify their design to meet the often fast changing needs of a web application. If you manage one medium website(100-200 pages) or many small websites; having a DHTML menu designer in your toolkit can save not just time and but also money as you can refactor/modify a site makeover in fast order.

Our rough categorizing of the three menu designers is as follows. Selteco is for use to easily develop small to medium-sized websites with many design changes required and when you want to include the same menu on many pages. Invest in Xtreeme SiteXpert if you need to auto-generate many menus from different sources or you need many different menu styles and the ability to precisely format those menus. However, be warned that SiteExpert menus are not a simple <script> inclusion but include many lines of HTML code making updates problematical. Choose Likno AllWebMenus again for a industrial-strength web designer with fewer menu styles than Xtreeme but more formatting options and some key features like stickiness and movable menus. But whatever, you do - don't miss out on enhancing your Web navigation options with a menu designer that will cost less than most computer textbooks these days.

Coalesys WebMenu Studio - Sidebar

Within the past few months we have been seeing a number of new DHTML menu designers, and one of the most interesting has been Coalesys WebMenu Studio. This a full stand alone menu designer (vertical and horizontal, any level of cascade). WebMenu Studio has a counterpart, PanelBar Studio which helps users design accordion/ Outlook-like panelbar menus.

WebMenu itself is avilable in 4 versions - one for general DHTML, an ASP version, an ASP.NET version, and finally a Java JSP version which is not a designer but Jar file based menu-designer with using special JSP-tags. In sum, WebMenu is very versatile.

And if one looks at the screenshot or tries the free download, WebMenu has menuing features equivalent to Liknos and Extreme. So why only a sidebar and not a full review ? Well two reasons. First, WebMenu uses a JavaScript obfuscator that makes the generated code next to impossible to steal - but also to debug. We have distinctly mixed emotions about an obfuscator which we cannot turn on and off. The second reason - it is tied to the first. We had a number of small, but notable display bugs with Webmenus. There was no way for us to debug the code because of the obfuscator. So we were not able to determine if the cause was our Dell Inspiron 8000 with Windows 2000 SP3 or WebMenu Studio. Until a new promised release comes out or we can debug WebMenu we will have to keep Coalesys as a very promising sidebar.