Fireworks to create a sliding menu

Menu

First look at the final effect:

HTML Effects

1, open the FW 8.0 (I use 8.0, of course, the other version is also possible)

2. A new one with a steady size 760x400

3, with a rectangular tool to draw a gradient rectangle, where this rectangle is to be used as the background of the navigation bar, so you can deploy your favorite color.

4, then I use the line tool to draw two lines see the following figure, as a separator line to use.

5, and then press and hold Shift+g to the two lines to synthesize the object, copy this object, from the window alignment panel finally see the following figure:

6, hehe down these several is the key, presses the shortcut key Ctrl+f8, brings up the new symbol window to select "The button"

If you see this dialog box then you are right.

7. Let's create the button here! Use the rounded Rectangle tool to draw the image below, and the gradient is shown below, and the border is one pixel.

8, and then copy this graphic to remove the border, adjust the size of the button has a protruding feeling

9, now we do the following triangle I use the path.

(1) Right-click on the top of the graph just now to select and cancel the combination

(2) Choose Folding Pen Tool in the following path plus three nodes see the following figure

Select the White Arrow tool and drag down the middle node into a triangular type

(3) Write the text

(4) In fact, we have completed a diameter of 70% of the workload. No, look down.

See component Edit area Here's the slip, press ...

Click to slide over, press ....

And each step will be selected to copy the Bouncing graphics, this is where to see the following figure:

If you can not find it, you open your eyes hard to find!

(5) Here is not urgent to finish, but first go back to release the button background graphics deleted, do not delete the text Ah!

(6) Point complete

10, OH now we go back to the scene, press F11 open the Library panel to drag out the button from the library

11, you can be based on the number you want to drag out the number of buttons you need

12. Select the button individually and enter different text in the property bar

13. Adjust the distance between the buttons

14. Select "File"---"Export"

Here must choose "to the Image folder", or your picture will be out.

OK, use the browser to see if you can, of course, you can also fall to the DW processing code, I do not say more here.