Make your own active menu bar with Dreamweaver

dreamweaver| Menu

Chat with QQ Friends of the days of its automatic hidden window to fondle admiringly, it can make the window appears refreshing and tidy and full of dynamic, the author of several friends want to add a similar in their own pages, after a joint exploration found that with DREAMWEAER can achieve this effect, Now let's take a look at the production of an active menu bar.

1th step: Make menu appearance

Figure 1

Create a new file in Dreamweaer, draw a layer, insert a table in the layer (Figure 1), decorate the table, add a menu item, and create hyperlinks to the hyperlinks, so that you can edit the CSS style of the hyperlinks to get rid of the underlined links. Set the decoration (decoration) of Link and Hover to None by using the CSS selector in the CSS styles panel, set the color (color) of "Hover" to red, and finally apply the set style to each menu bar (you can press "F12" key preview effect).

2nd step: The dynamic effect of the design menu

1, the selected level, when the mouse into the "Ten" glyph, press and hold left to drag the level to the upper right corner of the page (so that the entire menu bar completely exposed but the top edge just close to the page on the border), in the Window menu to open the Timeline panel, the selected level to drag Dreamweaer automatically produces an animated object of length 15 frames, drags the last keyframe of the animation object to frame 30th and sets its length to 30 frames. Then right-click at frame 15th, select the Add Keyframe option from the shortcut menu that pops up, and drag the layer to the appropriate location (Figure 2). Right-click at frame 15th in the Timeline window, select Add action from the pop-up shortcut menu, and add an interaction behavior to the frame, Dreamweaer will automatically open the Behavior panel. Click the + button in the Behavior panel, select Timeline/stop Timeline from the pop-up menu, open the Stop Timeline dialog box, select Timeline1, and then click OK to close the dialog box. The interactive behavior event is "ONFRAME15" and the action is "stop Timeline" so that when the timeline runs to frame 15th, the animation stops playing, which enables the function of the menu bar to bounce back.

Figure 2

2, in the same way in the timeline of the 30th frame also add a "Stop Timeline" interactive behavior, so that the menu pop-up function. After the two interactions have been added, a blue square appears above the corresponding frame in the Timeline window, which represents an interaction behavior. Select the auto play and cycle check box to make the animation loop automatically (Figure 3).

Figure 3

3, now also want to set a behavior so that the timeline can continue to play after the stop. My idea is this: In general, the menu bar bounces back but only retains the words "Campus grand" below, and the menu bar pops up and bounces back through the "Campus Grand" on the menu bar, which is controlled by the mouse. So you can continue with this: select "Campus Grand" in the menu bar (to ensure that the word's hyperlink address is "#", that is, a null link), click the "+" button in the behavior panel, choose "Timeline/play Timeline" in the pop-up menu, and select " Timeline1 Click OK button, the Behavior panel will add an action, in its "events" Drop-down list, select the "OnMouseOver" event, indicating that when the mouse is over the typeface play animation (Figure 4).

Figure 4

At this point, an active menu bar has been made. You can preview the effect by pressing the "F12" key.

But there's a bit of a drawback to this menu bar, its disappearance must be in the mouse through the menu bar under the specific area (in this case, "campus Grand View") when the line, to the menu bar pop-up, as long as the mouse away from the menu bar can make the menu disappear, may need to use fireworks or flash , if you have any good method, may wish to write a letter and we exchange.