by Mike Swope Monday, September 30, 2002

It is not often that one witnesses the birth of a great piece of software first hand, but I recently witnessed the release of Big Bang Extensions’ MenuMachine for GoLive 6, and few things have excited me as much or offered as much promise and value as MenuMachine. Nothing has ever made me think that Adobe (or some other software company) should pay big bucks for a third-party application or extension to enhance their application. But there’s been nothing like MenuMachine for web design and development. Not from Adobe. Not from Macromedia. Not from Microsoft. Not to my knowledge, at least, as a full-time web designer and entrepreneur. MenuMachine’s powerful prescription for DHTML menus is in part fueling sales of Adobe GoLive 6 to users who until now have been hesitant to upgrade.

BlueWorld GoLive Mailing List Vocal About GoLive 5 & GoLive 6

Some users of Adobe GoLive 5 have long resented Adobe for the lack of bug fixes for GoLive 5. Known bugs have gone unsquashed. The only update that Adobe issued for GoLive 5 was the Netscape Navigator 6 fix. The resentment from those who were once faithful was clearly and frequently stated on the GoLive mailing list hosted by BlueWorld. Many had threatened to jump ship to Dreamweaver, as Macromedia appeared to at least be interested in issuing updates to its flagship web design application in response to user feedback and the need to provide a competitive edge. In response to this unrest, Adobe was completely silent. No promises were made. No expectations were raised. No faith was earned. GoLive users felt like they were being left behind in the world of web design. List members include well-respected web designers, Adobe representatives, GoLive beta testers, and authors of books about GoLive.

When Adobe announced GoLive 6, there were many questions posted the GoLive mailing list. Were the bugs from GoLive 5 fixed? Is the upgrade from 5 to 6 painless or will the transition break sites that are already working? Is there a strict step-by-step recipe to upgrade GoLive 5 sites to GoLive 6 that may create hours and hours of rebuild work if it isn't followed? Is the Netscape Navigator fix built into GoLive 6? Are GoLive 6 site files cross-platform? How well does GoLive 6 run in OS X and OS 9? Has GoLive 6’s built-in FTP feature been updated? Is GoLive 6 worth the upgrade price? Perhaps some remembered Adobe’s lackluster upgrade to PageMaker 7.

After the smoke from the GoLive 6 product announcement cleared, and despite the assurances of Adobe representatives and beta testers, list members were content to let others skate the bleeding edge and report back to the list about GoLive 6’s improvements, stability, promise, and support. Of course, they weren't confident that they would see fixes from Adobe even if bugs were discovered, so many seemed content to stay at their current version (some at v3, others at v4, most at v5), until there was a compelling reason to upgrade. The catalyst to upgrade for some was OS X, since GoLive 5’s performance in Classic (OS 9 running inside OS X) is abominable. But even more remained at OS 9 with GoLive 5. I understood. I wasn’t eager to upgrade to GoLive 6 either. GoLive 5 worked just fine in OS 9.x.

MenuMachine: La Raison d’ Upgrade

The overwhelming raison d’ upgrade for many members of the GoLive mailing list, including myself, came in the guise of a well-planned, well-designed and well-implemented GoLive 6 extension to create DHTML menus from a small, unassuming Australian developer, also a member of the GoLive mailing list. Other members from the list had even beta tested the GoLive 6 extension (list members sure can keep secrets!). MenuMachine was announced to the list and released at the introductory price of $39, and Big Bang Extensions was immediately swamped with sales. To date, sales have exceeded expectations and continue at a steady pace.

DHTML menus are those menus found on web sites that, when rolled over or clicked on, drop down or cascade into submenus, sometimes 3 or 4 menus deep. DHTML menus help visitors navigate large sites such as Koch Industries’ and Flint Hills Resources’ web sites. Neither site was built using GoLive and MenuMachine. Both sites expose some of the problems that some visitors can experience with DHTML menus. DHTML menus must be well-coded or they will only work well in a single browser (usually Microsoft Internet Explorer) on a single platform (usually Microsoft Windows). As a Mac user, this has been my experience, though I don’t think there’s much reason for it. Just careless coding and shortsighted planning. Other Mac users, I’m sure, have had the same experience. DHTML menus must be carefully coded to work well cross-platform and cross-browser as a web site should.

Overlooking compatibility for the moment, DHTML menus are painstaking to create, taking many hours to hand code, test, fix bugs and edit. Many programmers, of course, will borrow code they’ve used already as a starting point for new menus, carrying along with that code its bugs and idiosyncrasies. Despite this shortcut, DHTML menus take a great deal of time to develop. DHTML layers must be programmed to be triggered on and off. Background and font colors made to change on mousein and mouseout. Submenus set to appear and disappear. Hyperlinks established. Images created and made to rollover. There are dozens of options for developers and designers to consider when creating DHTML menus. Some of the tools in GoLive and Dreamweaver make DHTML menus easier to create, but not enough to rave about to friends, family or colleagues. For the beginner, DHTML menus are to be faced only by the very brave, even with GoLive or Dreamweaver in their web arsenal.

The moment that Big Bang Extensions announced MenuMachine, GoLive list members like myself thronged to the Big Bang web site to check out the new software that promised to make DHTML menus so simple. We were skeptical, but hopeful. We studied the screenshots. Read the extensive instructions. Some of us whooped, I’m certain. Those of us with loose wallets let go of $39 for the opportunity to try this software that seemed too good to be true. Since it was from a respected and reputable list member, it was much easier to accept that maybe, just maybe, this software would do what was promised. Make DHTML menus easy and reliable. Just maybe. I crossed my fingers as I entered my credit card information. I had a web site that could be completed well ahead of deadline, if MenuMachine was all it was supposed to be.

MenuMachine was exactly what Big Bang Extensions had promised. And more!

Within hours of MenuMachine’s release, list members began singing its praises to the list, crooning happily and linking to sample menus they had just finished. From scratch. Without any hand coding. As the posts affirming MenuMachine’s ease of use, stability, usability and efficiency became more frequent, the skeptics grew optimistic. Those who had been most vocal about the shortcomings of GoLive 5 suddenly began to ask about GoLive 6. Those who had heretofore no compelling reason to upgrade to GoLive 6 suddenly found themselves buying MenuMachine, and then GoLive 6 so they could use it. Big Bang Extensions continues to receive email from customers confessing that the only reason they have upgraded to GoLive 6 is to use MenuMachine.

I don’t blame them. Not only does MenuMachine make DHTML menus easy to create in GoLive 6, its menus are compatible in the handful of major browsers, including Microsoft Internet Explorer 4+, Netscape Navigator/Communicator 4.x, and Netscape 6/Mozilla on both Mac and Windows. Exactly as advertised on Big Bang's web site.

MenuMachine: Powerful Medicine

MenuMachine simplifies the creation of DHTML menus substantially for both experienced and inexperienced designers using GoLive 6. It makes them so simple, in fact, that menus that would have taken hours can now be created with MenuMachine in 1/10th the time. For example, I had the crude beginnings of a DHTML menu with three dropdowns that I had started just before MenuMachine was released. The first crude single DHTML layer for the dropdown took me better than an hour to create and have it turn on when rolling over the trigger. I still had to insert the links and make it turn off when the cursor exited the area. Honestly, I wasn’t looking forward to finishing the dropdown and creating the other two dropdowns to complete the DHTML menu, not to mention editing the dropdowns after the client reviewed them and requested changes. But when MenuMachine was announced, I purchased it immediately, and in half the time I had already spent, I had created, tested and tentatively approved the entire set of menus with MenuMachine. Wow!

Although there are just three tabs to MenuMachine – Edit, Format, and Options – MenuMachine is powerful medicine. Big Bang Extensions has thrown in every option and control but the castor oil, it seems. First time users of MenuMachine will become drunk with MenuMachine’s power immediately, and will remember that first white-hot feeling of code-induced euphoria. They won’t ever forget it.

The powerful medicine of MenuMachine comes from its thorough capabilities but simple controls. In the real world, DHTML menus are rarely so sculpted and versatile as MenuMachine’s. They’re simply too expensive to custom-code for each and every web site. That is, until MenuMachine came along. MenuMachine DHTML menus can use either HTML text or images, colored text, and rollover text and images; can have colored borders, display main and submenus in different styling, display in specified fonts and styles, and have assorted alignments; can pop-up when rolled over or clicked, fade at a specified interval (usually milliseconds), overlap by specified amounts, display arrows to indicate the presence of submenus, open to the left or right, be positioned relative to the window edges, and scroll within the window at a specified speed. Dizzying!

Prescription: Purchase & Install Immediately. Use Daily. Use Often. (But not too often!)

It is very simple to install MenuMachine. In fact, very Mac-like. After users have purchased and downloaded MenuMachine, they simply copy the MenuMachine folder whole to the Extend Scripts folder in the GoLive 6 application folder. MenuMachine becomes available at the very next GoLive 6 launch. If GoLive 6 is running during this process, users will have to quit and re-launch GoLive 6 to begin using MenuMachine. The new MenuMachine object now appears in GoLive 6’s Object Palette.

To create a MenuMachine menu, the user simply drags the MenuMachine Object from the Object Palette to his/her document and places the resulting floating layer as he/she pleases. DHTML menus are floating HTML layers, so they can be placed anywhere on the page, so long as the MenuMachine object is not moved out of its parent floating box. If the user moves the MenuMachine Object out of the floating box, MenuMachine displays a pop-up error that this is bad for MenuMachine and it must be undone. MenuMachine, fortunately, offers a Special menu item to fix the nested MenuMachine object. The MenuMachine object must also be the first or last item on an HTML page, i.e. not enclosed within <DIV> tags. Once the MenuMachine object has been successfully placed, the user then edits and formats the menu to his/her satisfaction, using MenuMachine’s three tabs.

But MenuMachine would be only a Band-Aid prescription if it could not be used with GoLive 6’s components feature. Fortunately, MenuMachine works in components! With components, GoLive 6 users can update their MenuMachine menus in a single HTML file (the component) and have all pages which employ the component be updated as well. Oh, yeah!

The one thing that users must remember to do is upload the Generated Items folder to the live web server along with all pages and updated pages using MenuMachine for their MenuMachine menus to work. This is true with every new menu created and every update made to a menu. MenuMachine writes its JavaScript code to a file inside the Generated Items folder so that the user’s browser need only read the MenuMachine JavaScript code and cache it for best performance. Always a good practice (if you’re using GoLive and still having your JavaScript code written in your pages, you should reconsider).

Anatomy of the Machine

The Edit Tab. The first tab the user will explore is the Edit Tab, as the Edit Tab is the first tab displayed by default. The settings in this tab control the depth, contents and effects of the menus.

1) This small triangle appears on all three MenuMachine tabs. It usually indicates that a palette menu is available, for selecting and/or loading presets. In the case of MenuMachine, this feature is not yet implemented. That it appears in MenuMachine may foretell an additional feature for a future release.

2) This question mark button likewise appears in all three MenuMachine tabs. Clicking it with a MenuMachine object selected launches the system’s default browser and loads MenuMachine’s help pages in the browser. A very important feature for new users of any software package. The presence of this feature also indicates the quality of support users can expect from Big Bang Extensions. Big Bang hasn’t cut any corners. Professional all the way!

3) This context-sensitive live menu preview area is also available in all three MenuMachine tabs. Although MenuMachine doesn’t provide live previews beyond the top level menu within the GoLive page, this feature displays how the selections made in each tab will affect the menu, even the rollover state. The normal state is always displayed. To preview the over state, users just click in the live preview area. That this preview area is also context-sensitive is important. Since users can change aspects of each and every menu item in this tab independently of all others, the preview will change depending on which menu is selected, displaying the unique choices made for the selected menu item.

4) The hierarchical menu list clearly shows each menu item and its placement in the menu hierarchy. The list acts as an outline, indenting each new level. The menus are displayed by the name given to them in #8 below. The live menu is displayed letter for letter and in the same placement as in this menu list. The arrows on the left of each menu item work like the arrows in the Mac OS and GoLive’s site palette: click an arrow once to expand the menu item next to it for viewing, click the same arrow again to collapse the menu back to its original state. The arrows to the right of the list area scrolls the menu list up and down. If the user finds the relatively shallow height of this area frustrating while working with larger menus, he/she can simply expand the height of the overall palette. The menu list area expands proportionally with the rest of the palette. This can be a huge stress reliever!

5) These two arrows move a selected menu item up and down the menu hierarchy within its menu. For example, if the user selects a menu item under a menu called Products, he/she can move that item higher and lower in the menu under Products using these arrows. Just as users do with GoLive actions. But, unfortunately, these arrows do not move menu items to another menu. And so far as I could determine, nothing in MenuMachine allows menu items to be moved from one menu to another. I thought that perhaps clicking and dragging a menu item might accomplish this. Alas, it did not. So we’re stuck with the limited vertical movement within menus provided by these up and down arrows for the time being.

6) These three buttons are not closely related, but MenuMachine groups them together, so I will follow suit. The ruler button controls the overall dimensions of the MenuMachine object on the page. When the user clicks the ruler button, he/she is prompted with a dialogue box to enter pixel values for width and height of the menu in its normal state. The paint bucket button is probably the most useful of these three. The paint bucket button is used to duplicate menu characteristics from a select menu to other menu items of the user’s choice. To use the paint bucket button, the user should first select the menu item whose characteristics he/she wishes to copy to other menu items. Then the user clicks the paint bucket icon and in the resulting dialogue box simply selects the menu items to which to copy the attributes of the selected menu item. The third button in this suite is the most obtuse of any feature in MenuMachine. It allows users to bind GoLive actions to MenuMachine menu items by hooking into actions that have been configured as Head Actions set to trigger on call. What does this mean exactly? That advanced GoLive users who employ actions as part of their normal routine can integrate MenuMachine into their existing sites and workflow as easily as possible.

7) These three buttons are perhaps the simplest to understand. The + button creates a new menu item by duplicating the selected menu item and placing that duplicate at the same level as the original (much like duplicating a layer in Photoshop). The sub-menu button creates a sub-menu in the same manner but places the duplicate menu as a sub-menu of the selected menu. The trash button deletes the selected menu item and any sub-menus. As a safeguard against accidental deletion, which cannot be undone, MenuMachine displays a dialogue box for the user to confirm or cancel the deletion before the menu item is permanently deleted.

8) The lifeblood of MenuMachine. Users enter the text to name each menu item, as well as specify the link and link target for each menu item. Each menu item’s name set here is displayed above in the menu list, even if the user elects to use graphics in his/her menus (see #9).

9) Although many users prefer to use HTML text for their menus, many users like to incorporate graphics into their menus. MenuMachine accommodates both types of users. Users may elect to use graphics for select menu items, or for all menu items if they wish. Users simply click to use an image, target the image in the site palette to use for the normal state, and target an image for the rollover state if they wish.

10) Another simple but powerful feature. The user specifies the dimensions of each menu item in pixels, whether text or graphics. If the dimensions are too small, the text or graphic in the menu will be clipped. With the proper dimensions, MenuMachine menus can be blended seamlessly into web sites.

11) Color is the most noticeable characteristic of any menu. With MenuMachine, users have control over the background and font colors for each menu item, for both the normal and over states. If the user wishes, he/she can make every menu item a different color with clashing text. We prescribe, however, that users employ color conservatively and logically in their menus.

The Format Tab. The Format tab controls formatting for both top level and submenus. Here users can elect to use the same formatting across all levels, or to format the top-level menus separately from the sub-level menus.

1) If users want to have a style for the top-level menus separate from the style from sub-level menus, users simply check this check box to format them independently. If this check box is activated, a pull-down menu appears in #2 to choose to format the top-level and then sub-level menus. Otherwise, no pull-down menu is available in #2, and all formatting choices apply indiscriminately to the entire menu.

2) If users haven’t elected to format top-level menus from submenus, all choices made here affect the entire menu. If they have elected to format the top-level and submenus differently, they will need to apply formatting for one first, then the other. There are two types of borders to consider in this tab. The first is a border around the outside of the menu, a box enclosing all the menu items. The other is a border between menu items. The border width parameter, as one can guess, sets how wide the borders will be. If 0 (zero) is used here, there will be no border around the outside of the menus. If any other number is used here, a border of that width will appear around the outside of the menu. Of course, the color parameter specifies the color of the border. Only one color can be specified. If the check box for Border Between Items isn’t checked, the border is displayed only around the outside of the menu, not between menu items. When the border between items is checked, a border of the same width is displayed between menu items, like cells in an HTML table. Users must remember to format both the top-level and sub-level menus if they have elected to use different formatting for them.

3) Users also control typeface, font size, font style (whether bold or italic), and the alignment used in the MenuMachine menu. MenuMachine uses the standard font sets of Arial, Verdana, Times and Courier, the same that come with GoLive by default. I could not determine how to add another font set to MenuMachine, so it may not be possible to add another font set. To use one of the default font sets, users simply choose the desired font set from the pull-down menu. Users also specify font size in either pixels or points, whichever is preferred. Users may also choose to make the fonts in the menu normal (by default), bold, italic or bold and italic by checking the appropriate box.

4) Users also specify the padding in pixels to be used in the menus to offset the type from the top and left edges of the menu items. Padding here is the similar to cell padding in tables but does not apply to bottom and right of the menus as padding does in tables. To control the offset from the bottom and right edges, uses must make the menus taller and wider to create the illusion of bottom and right padding. I don’t believe this is an oversight of MenuMachine, but rather I think it’s a limitation of how DHTML menus are displayed in browsers.

Options Tab. The Options tab allows users to specify menu behaviors globally, including orientation, trigger, fade delay, overlap, and relative positioning.

1) MenuMachine allows users to choose the orientation, either vertical or horizontal. Users can also specify for menus to be triggered by either rollover (the traditional choice) or click. But no menu utility would be complete without a means to hide the menus again. MenuMachine also allows users to control how long in milliseconds before menus disappear again. So for menus to disappear in one second, users should enter 1000 here; for two seconds, 2000; for three seconds, 3000; etc.

2) By convention, DHTML menus overlap to visually associate submenus with their parents. Checking the check box for Preview will preview the overlap in the live preview menu area (discussed above). MenuMachine allows users to specify in percentage how much submenus will overlap their parents horizontally and vertically. Percentages are measured from the top and right edges of the parent menu by default. A larger percentage in the horizontal setting moves the menu toward the left edge of the parent menu; a smaller percentage in the vertical setting moves the menu down toward the bottom edge of the parent menu. This behavior is reversed if users check Menus Open Right to Left (see #3 below).

3) These two options are simple. Users check Show Arrows for Submenus if they wish to have an arrow displayed in menu items that have submenus. If users wish to have menus open right to left (the default is left to right), they check the box to make them do so.

4) MenuMachine’s positioning is absolute by default. So wherever the MenuMachine object is placed on the HTML page is where it will be displayed from the top and left edge of the HTML page and scroll with the HTML page. MenuMachine, however, allows users to change this behavior. MenuMachine menus can be offset relative to the left, right, center, top, middle and bottom of the HTML page. Both negative and positive numbers can be used to position the menu. If neither horizontal nor vertical positioning is selected, the user can elect to have the menu scroll to maintain its vertical position in the browser window, independent of the HTML page. Users can also select whether to scroll slow, medium or fast, and check whether to scroll smoothly or less smoothly (default).

Case Studies: Web Sites Employing MenuMachine

• Ad Pro, LLC
• Anthony Real Estate
• Beate De Nijs' MenuMachine Experiments
• Brian Sooy & Co.
• DD Data Distribution
• Physician Practice Solutions
• Preview Online
• Reiss Viking
• Rochman Design-Build
• Sawmill River Farm
• 2003 Intel International Science and Engineering Fair

Prognosis: Cause for Exuberance

Big Bang Extensions has left out very little, if anything, from MenuMachine. No other solution provides such a powerful, integrated, cross-platform and cross-browser menu creation system for Adobe GoLive, or any other WYSIWYG web package. For MenuMachine’s power and flexibility, many users of GoLive 5 are upgrading to GoLive 6, despite hesitations about Adobe's past behavior regarding GoLive. Whatever Adobe’s behavior in the past, MenuMachine offers a great opportunity and, frankly, Adobe should purchase the rights to MenuMachine from Big Bang Extensions and then pay Big Bang Extensions to maintain and continue its development. MenuMachine is simply that powerful. For now, however, MenuMachine is an incredible bargain at a special $39 introductory price, and quite possibly the best reason (second only to Mac OS X compatibility) to upgrade to GoLive 6. Visit Big Bang Extensions to purchase and download this exceptionally powerful and empowering GoLive 6 extension.

Mike Swope is publisher of inetreviews.com, a site that publishes hardware, software and book reviews and sells Macintosh and Coca Cola merchandise. Mike and his wife are also partners in SuperPersonalized.com, offering professional quality photo calendars, mousepads, magnets, t-shirts and other photographic gifts. Mike is also president of MacWichita Macintosh User Group in Wichita, KS, a full-time graphic/web designer for Koch Business Solutions, and proprietor of Swope Design.