Sample Article from Element K Journals' Quick Answers for Web Design CD

Creating effective DHTML pop-up menus
One of the newer interface styles to come into vogue is the DHTML pop-up menu, shown in Figure A. These menus allow the designer to reduce page clutter by concisely putting navigation in one area. Even though pop-up menus are wonderfully useful, many designers are hesitant to use them because of the technology needed to build them. Pop-up menus require the use of DHTML, which includes JavaScript, layers and CSS. If you aren't comfortable working with those, then creating a pop-up menu can seem like a daunting task. However, we'll show you that it isn't really so bad, especially with the help of Dreamweaver and GoLive. We'll show you how each program handles pop-ups, but before that we need to cover some of the theory behind making the pop-up menus so that you'll understand why we're doing things the way we are.
Figure A: Pop-up menus are a real asset on content-heavy pages.
What's on the menu?
To illustrate our examples we'll first tell you where pop-up menus won't work. With that warning, we'll then examine the theory behind creating pop-up menus using CSS and HTML as well as graphical elements. In this discussion, we'll be incorporating JavaScript, graphics and CSS elements to build the menus. We'll then show you how to create pop-up menus using both Dreamweaver and GoLive.
Not universally compatible
Before we get started, it's important to realize that pop-up menus aren't going to be universally accessible on the Web. The techniques we'll show you are compatible with IE 5+ and Netscape 6+ but not with Netscape 4.x or IE 4. If you know that your target audience is using older browsers, then you may want to consider incorporating other design alternatives into the site's design such as redirecting or hiding things from older browsers.
Pop theory
There are two different ways to go about creating pop-up menus. With one style, you rely more on CSS and use actual HTML text for the menu options. This style is easier to update and modify.
The second style utilizes all graphical menu elements. This style of menu is easier to put together and control, but more difficult to change. Your choice of which to make may depend somewhat on how much you expect to be editing the menu's content. We'll show you how to do both by covering the first style in Dreamweaver and the second in GoLive. Both applications make the creation of pop-ups much easier and more accessible to designers of all levels.
Pop-up basics
Pop-up menus consist of a few different components, including JavaScript, CSS, graphics and layers, which are the most important parts of building pop-up menus. Layers allow you to stack graphics on top of each other within your Web page. They also allow you to animate objects on your page or, in the case of pop-up menus, turn groups of graphics on and off.
We'll create separate layers to hold each of the menus that will pop up on our page. Those layers are initially invisible, and as we roll over or click the main button, the layers with the menu items appear so the user can make her choice.
Behaviors
The JavaScript that actually does that work in our pop-up menus is called a behavior, or action. These scripts are attached to an object on our page, such as an image or layer, and give them a behavior such as a rollover. Dreamweaver and GoLive each have their own way of working with scripts, as we'll soon show you.
Creating the graphics
For both pop-up styles you need to create basic menu type graphics. It's always important to plan out your images before you start building. Your plan will be based on the menu method of choice. We'll begin by reviewing your options when building a menu using text. Then we'll outline the same general parameters when building a graphical menu. Finally we'll highlight the need to use transparent GIFs to avoid problems when displaying these menus.
Text menu
If you're building a menu that will use text for the menu options, then things will be easier graphically. You'll only need to create one entire graphic for each menu. For this style of menu, we found that it worked better if we included the original button at the top of the menu graphic, as you can see in Figure B. This makes it easier to control the rollover function. The advantage to this style of menu is that it's easy to edit and the text is easy to read.
Figure B: This single image will become the pop-up menu for our example in Dreamweaver.
Graphical menu
If you're building a graphical menu, you'll have many more little pieces to deal with. You should also try to make as much of it as reusable as you can, such as the top bit, for padding and spacers, and the bottom of the menu. Figure C shows how we broke apart the graphical menu that we'll be using in GoLive. As you can see, we tried to keep the components simple and reusable.
Figure C: We used 11 images to create the graphical pop-up menu in GoLive.
GIF tricks
Finally, you need to remember that both menu styles are going to appear over part of your page content. If there are any curves or irregular shapes, you'll need to use transparent GIFs for the graphics. Because of this, you won't be able to anti-alias corners or angles. Also, keep in mind that you can't use a standard Adobe Photoshop drop shadow. A neat trick for creating a similar effect in a GIF graphic is to fill the area where the drop shadow should be with alternating pixels of black and your background color. When you knock out the background color for transparency, you'll have alternating black and transparent pixels that will look like a semi-transparent drop shadow on your page. You can see our shadow technique in both Figure B and Figure C.
Building a pop-up menu in Dreamweaver
The first pop-up menu we'll create is a menu that pops up when the mouse is over the button. We'll use the graphic in Figure B since we'll be using HTML text for the actual menu options.
To get started, you'll want to set up your page the same way as you would normally set up any Web page. In our case, we've used tables to break up the page and we've added our main menu, which will have the pop-up menus coming off of it. Figure D shows the basic layout of our page before we start building the pop-up menus. We'll build the Products menu since it's the first item in our navigation. We'll then create all the other menus in the same manner.
Figure D: We've already laid out the basic page in Dreamweaver.
Creating the layers
Once your basic page layout is complete, you need to create the layers that will hold the menus and menu items. To do this, click the Draw Layer button on the Objects panel and draw a new layer in the document in the general location of where the Products menu will appear. Be sure to make the layer larger than our menu. You can now access the layer's properties in the Properties panel. You shouldn't need to mess with the properties much, but it's a good idea to give the layer a useful name so you can keep your layers organized as your page develops. We named our layer productMenu.
Now, we need to place the menu image into the layer. To do this, make sure that the insertion point shows up inside the layer. You may need to click in the layer. Then, click the Insert Image button on the Objects panel and the Select Image Source dialog box appears, allowing you to specify a file or URL for the image. Once you select the menu image, it appears in the layer. Now, resize the layer so that it's tight around the image. If it's any larger than the menu, it will throw off your rollover detection. In Figure E, you can see our first layer with the menu image in it.
Figure E: Here's the menu properly positioned in a layer.
Nesting layers
Now we need to add the text that will be used as the menu items. To do this, you need to add a second, nested layer on top of the menu layer. A nested layer is a layer within a layer and it allows you to control the position and visibility of multiple layers at the same time. With the menu layer still selected, click the Draw Layer button and draw a new layer inside it while holding down the [option] key ([Alt] in Windows). Name the new layer productText. According to Macromedia, this should automatically cause the new layer to become nested in the first, but it's best to be sure. Choose Window > Layers to bring up the Layers panel. If the layer nested properly, it should look like ours does in Figure F. If they both look the same, then they didn't nest properly and you'll need to nest it manually. Click and drag the second layer, while holding down the [command] key ([Ctrl] in Windows), onto the menu layer. It will become nested, but it will mess up the alignment, so you'll have to readjust it.
Figure F: This is what the Layers panel should look like when you have nested layers in your document.
Once you play with the layers a little bit you'll get a feel for what nesting them does. For example, if you click on the productMenu layer and move it around you'll notice that the productText layer stays positioned relative to the menu layer. Also, if you change the visibility of the productMenu layer, either through the Layers panel or through the Properties panel, the productText layer changes as well.
Adding text
Now let's add some menu options to our pop-up menu. Since we're using text for our options, we can do all of the formatting with CSS. It may be helpful to refer back to the article 'Understanding typography controls with CSS' in the January 2002 issue of Inside Web Design, where we discussed creating CSS in Dreamweaver in more depth. Type your menu options into the productText layer with single line breaks by pressing [shift][enter] between each option. Now you can set up a simple CSS class to adjust the look and line spacing for the options, you can also specify an A:hover selector class to give the link text a rollover effect without images. Our final menu setup is shown in Figure G. It's a good idea to check alignment and such in a browser (IE 5 or NN 6) before you set up the scripts.
Figure G: All our layers are positioned and we're ready to add the behaviors.
Make it pop
Getting the menu to actually pop up is quite easy in Dreamweaver. However, there are some tricks you need to know. It's easiest to step through the procedure in the same way a user would navigate the site. By default your menu won't be visible when a user arrives at your site, so let's make the pop-up invisible so we can access the main menu button. To do so, click in the Eye button in the Layers panel to turn off the visibility of the layers and their contents.
Now, click on the main menu image that will be used to trigger the pop-up menu—in our case, it's the Products button. Now, choose Window > Behaviors to open the Behaviors panel. Click the Add Actions button and select Show-Hide Layers. The Show/Hide Layers dialog box appears, listing all available layers in your document, as shown in Figure H. Since our layers are nested, all we need to do is choose Layer 'productMenu,' click Show, and then click OK. Now the new behavior shows up in the behavior window, but it may not have the correct event. Events are what trigger the action part of the behavior. In this case, you want it to be triggered by an onMouseOver event. If it doesn't say onMouseOver in the Events column for your action, click on the pop-up menu and choose onMouseOver from the list. Now if you test your page in a browser, the menu should pop up when you roll over the Product button. You'll notice that it doesn't go away, though, so that's what we'll tackle next.
Figure H: Set the behaviors action to show the productMenu layer when you roll over the button.
Now that our menu appears, we need to make it disappear when you roll off it. As with the previous behavior, this is pretty straightforward. First, bring back the menu layers by clicking on the Eye icon in the Layers panel. Dreamweaver lets you attach a behavior to any object, and you want to attach this one directly to the layer itself. Click the Layer icon in the upper-left corner of the productMenu layer. This selects the layer itself as opposed to the contents of the layer. Use the Behaviors panel to add another show/hide layer action. This time you want to hide the productMenu layer. Be sure the event is set to onMouseOut, which is the off part of our rollover, and you're ready to go. Before you test this in a browser, remember to turn off the layer visibility so it starts as if you were first entering the page.
One small problem
If you just tested that last part as we suggested, then you may have noticed one small problem. If you move your mouse over the Products button the menu appears, and if you move your mouse off the menu it disappears. This is good, but here's the problem: If you move the mouse onto the menu and then try to choose a menu option, the whole menu disappears before you can click on anything. Oops, slight problem.
Here's what's happening. When the mouse moves from being over the productMenu layer to being over the productText layer it triggers the onMouseOut event. Unfortunately, JavaScript doesn't consider a nested layer the same object in regards to rollover events. So what do you do? Easy, you just need to remind the scripts that we need those layers visible while we're choosing an option.
To do this, select the productText layer like we did the productMenu layer. Now add a show/hide layer action and set it to an onMouseOver event. This tells the browser to keep those layers open even though there's an onMouseOut telling it to close them. Remember to turn off the layer's visibility and test it again in a browser. Now everything should be working great. Repeat these steps for the rest of your menus and you're all done.
Creating GoLive pop-up menus
Things work a little differently in GoLive. Unfortunately, GoLive doesn't support nested layers, so we can't use the above method. GoLive is also more restrictive on what you can attach behaviors to than Dreamweaver. However, we're not going to let that slow us down. We'll just change our methodology to the graphical text style of pop-up menus rather than CSS. Let's look at a slightly different kind of pop-up menu and how to build it.
Note: You can also build this style of menu in Dreamweaver.
Click-pop
The rollover pop-up is only one of the types of pop-ups being used on the Web. Another type is what we like to call the click-pop pop-up menu. This type of menu is triggered when a user clicks a button and the menu stays up until she clicks again. This style of menu is especially useful if you're just updating content on a page instead of actually jumping to a new page altogether. A good example of this would be changing an image on a page in a catalog so that a viewer can look at all the colors a particular item comes in. Graphical pop-up menus are also popular because they usually look a bit snazzier.
We used GoLive to set up a normal Web page. For the majority of the page we created simple tables with images, as you can see in Figure I. Up to this point the page is just your basic HTML page, but we'll soon change that.
Figure I: Here's the page we'll be working with in GoLive.
Floating boxes
For the pop-up we need to add a new layer, which GoLive refers to as a floating box. Click and drag the Floating Box object from the Objects palette onto the page. It doesn't really matter where you put it since you'll have to position it manually anyway. Be sure to give the floating box a name in the Floating Box inspector. We named our floating box menuGallery.
Once you've created the floating box you can add the layout and images for the pop-up menu easily. You can use a simple table layout as we've done in Figure J. Once you've set up your graphics, you can switch to the Preview tab to see how it looks in a browser. You may need to adjust the floating box position a few times to get it right.
Figure J: Our table layout was easy to place into the floating box.
Once the floating box is set up, click on the outline of the floating box to bring up the Floating Box inspector. Now is a good time to set the menuGallery layer as invisible by default. We can make it visible to work on it by using the Floating Box palette, but by default the floating box will be invisible when you first enter the page through a browser.
Adding actions
GoLive handles actions a bit differently than Dreamweaver. It basically supports three different types of actions: on Load-, Link- and Timeline-based. For our purposes, we'll be focusing on the Link-based actions.
The first thing you want to do is make the image a rollover. To do this, switch to the Smart Objects tab in the Objects palette, and then drag the Rollover object onto the image you want to turn into a rollover. You can then specify the rollover image in the Rollover inspector, as shown in Figure K.
Figure K: The Rollover inspector makes it very easy to add rollovers in GoLive.
Setting an image as a rollover automatically makes it a link and allows you to define link actions for it. To do so, switch to the Actions palette and you'll notice that there's a list of events in the Events section of the palette. We want the pop-up menu to appear when you click the button, so choose mouseClick from the list. Now, just click the New Action button to set the action for that event. Choose Action > Multimedia > Show/Hide in order to set the properties for showing or hiding floating boxes, as shown in Figure L. Choose your box from the pop-up menu and set the Mode to toggle. This way you click once to open the box and once more to close it again. Switch to Preview to see how it works.
Figure L: The Actions palette allows us to create and configure our simple action that does the whole pop-up menu.
Finishing touches
That's really all there is to it. Add some more rollovers to your pop-up menus and the main menu and you're all set. It's also a good idea to add extra show/hide actions to all mouseClick events to make sure that all the other menus are closed before you open a new one. Go about it exactly as we described earlier, but use the new action button to add a separate action to close the other menus. It's a piece of cake!
Open options
Both Dreamweaver and GoLive are capable of making menus, but Dreamweaver is a little more flexible when it comes to adding behaviors to your Web site. We've shown you two different methods of creating pop-up menus, which can be very helpful in creating usable, interesting Web sites.