Tutorial: Page (1) of 3 - 08/05/02 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Macromedia Fireworks MX Interactive Menus

How to create multi-tiered menus and integrate them into your Web page By Dave Nagel
One of the great new features in Fireworks MX is its ability to generate horizontal and vertical interactive menus for display on the Web. The previous release of Fireworks had a similar feature, but it had virtually insurmountable problems, and so it was useless. In the new release, menu creation is not only easy, but it's also completely functional--a nice bonus feature for those who don't like to waste time creating things that don't work right.

We're going to take a look at this process in two sections: the creation of the menus and the integration of these menus into an HTML document. If you do not have Fireworks and would like to explore this feature, you can follow along by downloading the trial version of Fireworks MX at http://www.macromedia.com/software/trial/.


Creating an interactive menu
For those who have not yet experienced Fireworks' interactive menu capability, you're in for a treat. The process is so simple that you'll wonder why everybody doesn't do it this way.

1. To begin, launch Fireworks and create a new document. For this example, I'm going to lay out the basic horizontal menu bar with four menu items: Products, Sales, Locations and Company Info. This is just the basic menu bar so far, nothing interactive about it. It's simply the image that will anchor our interactive menu. I happen to be designing this as a top-oriented menu bar, but, since the new version of Fireworks allows you to move the interactive menus around anywhere on your Web page, feel free to design this menu anyway you see fit.



You'll note that in the example above I'm only using text. But you can make the menu bar look anyway you want, with graphics, text or even Flash elements, if desired.

2. I'll then use the Slice tool and draw four rectangles--one for each menu item. This, again, is just for the purposes of this example. The Fireworks menu system will allow you to create any number of horizontal or vertical menu items using just a single slice. But I want a separate interactive menu for each item.



When you're done drawing the rectangles, use the Select tool to click on the first slice in your menu bar. (You can tell a slice is selected by the blue border and anchors. Non-selected slices will be outlined in red.)

3. Next, select Modify > Pop-up Menu > Add Pop-up Menu.



4. A dialog box will appear, asking you to enter information about the menu items. To begin, enter in information for the first-tier menu items. For example, in my Products menu, I'm going to add product categories for my first tier and then later create a second tier of menus for more specific products. For now though, let's just work on the first tier. Mine will include Apparel, Footwear and Accessories.



5. Next I want to enter my second-tier menu items. These are the subcategories that will appear beneath the first-tier categories. For example, underneath my Apparel category, I want to add Shirts, Pants and Shorts. Underneath the Footwear category, I want to add Tennis, Soccer and Street. Underneath Accessories, I want to add Helmets, Gloves and Pads. To do this, click on your first item (Apparel) and then press the "+" button three times to add three blank fields underneath Apparel. (You can add more later or remove them later, if desired.) I'll do the same with the remaining two first-tier categories. Then enter the names of the categories.





As you can see, I';ve also added links for my second-ter menu items. This is so that when a viewer clicks on a link, it will take him or her to the Web page for the specified category.


Page: 1 2 3 Next Page


Related Keywords:Macromedia Fireworks MX Interactive Menus How to create multi-tiered menus and integrate them into your Web page

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved