Subtitles of the Movie

Popup menus are menus that are displayed in a browser in response to a pointer moving over or clicking a triggered web object, such as a slice or hotspot. Popup menu items can have URL links attached to them for navigation. For example you can use popup menus to organize several navigation options that are related to a button in a nav bar. You can create sub-menus, and popup menus for as many levels as you want to create. Each popup menu item appears as an HTML or image cell, which has an upstate, over state and text, in both states. To preview a popup menu you must press F12 to preview it in a browser. The previews in Fireworks MX workspace do not display popup menus. In this example, we are going to create a simple popup menu. The first thing we need to do is to create hotspots or slices over the area where the popup menu will be activated. I'll go ahead and draw a hotspot over these slices. And now that I've engaged our hotspot tool I'm going to remove the slice that was utilized in a previous movie. Next I need to select either a slice or a hotspot, then go to modify from the main menu and select popup menu, add popup menu. And the popup menu editor appears. The first thing we see are multiple tabs running across the editor. Content will display the options that determine the basic menu structure, as well as the text, the URL link, and a target for each menu item. Appearance contains options that determine the appearance of each menus cells up-state, over-state, as well as the menus vertical and horizontal orientation. The advanced tab contains options that determine the cell dimensions, padding and spacing, the cell border width, [00:02:13.0 and color, menu delay and text indentation. And finally position contains options that determine the menu and sub-menu placement. Depending on the design of the popup menu, you may not use all the tab's or options in the popup menu editor. You can edit settings in any tab at any time, but you must add at least one menu item in the content tab to create a menu that you can preview in a browser. Let's go ahead and add a menu item for about us. To do so select the add menu plus key. Here we can type in, after double clicking on it, about our staff. And I'll put a link - staff.asp. Or if I wanted to I could choose any of the URL's in our URL library. And I can also select a target if I want to. Let's go ahead and add another one. OK. Now let's take a look at the appearance. And right now Fireworks displays a visual representation of what our menu, our popup menu will look like. And here we can make some changes. For one I want to change the color of the text to black, make it a little bit bold. The over-state, let's change that to yellow and we'll see what that looks like. That looks pretty good. And make that a blue color, OK. Also I'll set the orientation for center. In our advanced tab we can change the cell width, height, padding and so forth. I like the default settings that we have already. I can choose to show borders or remove borders. I'm going to make the borders black. And we can choose position. I'm going to go ahead and go with the default setting and see what this looks like. I'll go ahead and select done. And now we mouse-over this section, we can see the menu structure will appear right here. And we could continue to add popup menu's to each one of the choices we have in our menu structure. Let's go ahead and see what this looks like, I'll bring up our browser. And when I mouse-over 'about-us' you can see our popup menu appears. Ideally I should have probably knocked that popup menu down a little bit further, so it doesn't block our existing menu structure. We can go ahead and modify that if we need to. I'll go ahead and select 'about-us' again, modify popup menu, and this time edit popup menu. There is our appearance, advanced and position. I'm going to go ahead and select this option. In fact I'll make it a little bit more, I'll say 24 pixels – OK, select done. And I'll select F12 again, bring up our browser, and let's see what our popup menu looks like now. That's considerably better. Now our popup menu appears exactly where we want it. And we can keep adding on additional popup menus or sub menus as we need to. like now. That's considerably better. Now our popup menu appears exactly where we want it. And we can keep adding on additional popup menus or sub menus as we need to.