Make your own free website on Tripod.com

How do I make the infamous "Microsoft Menu "

You can Download a zip file containg everything here (26k).

Overview

This tutorial is designed to give beginners the knowledge to create Dynamic Menus, as well as an "eye-opener" to the possibilities of Dreamweaver.

The Beginning

If you're using Dreamweaver 3 then add the Netscape fix from the "Commands" menu If you're using DW 2, there are plenty of free extensions for adding a Netscape fix.

Step 1

Create a layer and rename it "MenuBase" or anything else you want.

Step 2

Add a table to the layer with one row and as many columns as you need for different menus. I used 3 in this example. Enter the names of your menus, e.g....

Menu 1, Menu2, and Menu 3...

Step 3

Create a new Style Sheet file by "right clicking (windows)" or "option clicking (Mac)" and picking "Edit Style Sheet..." (or doubleclick on the style "(none)" in the "CSS Styles" window.

Under the "CSS Styles" Menu. Click the "Link" button and browse to your site root folder, enter a name for your Style Sheet e.g.... "Menu.css" Click "OK" and double click on your newly created style sheet. Click on "New" and pick the "Use CSS selector"

Pick "a:hover" and click OK. Set the following to:

Font
"Verdana, Arial, Helvetica, sans-serif"

Size
8 points

Color
red

Leave everything else at its default and click OK.

Now Click on the "New" button again and pick Make "Custom Style(class)" and type in ".white" where it says ".unnamed1"

Set the following:

Font
"Verdana, Arial, Helvetica, sans-serif"

Size


8 points

Color
white

Font Deceleration
None

Leave everything else at its default and click OK.

Click "Save" and "Done"

Step 4

If you don't already have it open, open the CSS Styles window "F7"

Highlight each of the text for each menu and add a link into the "Link requester" e.g.... "#" AFTER YOU HAVE ADDED THE LINK!!! While it's still highlighted, click on the "white" Style in the CSS Styles window.

Select the table and change the Back Ground color to black

You should have something similar to this:

Menu 1
Menu 2

Step 5

Create a new layer and rename it "Sub1"
add as many sub items as you'd like, I used 3: Sub 1, Sub 2, Sub 3.
Position the layer so that it is touching the bottom of the "MenuBase" layer.
Apply Step 4 to the layer once it's in position...

You should have something similar to this:

Repeat this for Menu 2 and 3's sub menus.

Step 6

Create one more layer and name it "MenuHide" in the "Layers Window" (F11) click and drag MenuHide to the bottom, or simply change Z order to 0. This is going to be the layer that hides the menus on mouse out... (pretty self explanatory)
In the MenuHide layer, add a 1 x 1 pixel transparent GIF, resize the GIF and layer so that it surrounds the area around the menu, in short anywhere you think the user may scroll off...( I used 245 x 130)

You should have something similar to this:

Step 7

Now it gets to the tricky part... OK, it's not that tricky but it sounded good...
Hide all of the "Sub" Layers, and the "MenuHide" Layer. Open the "Behavior inspector" (F8)
Select "Menu 1" Click on the: and add the "Show-Hide Layers" behavior.
Set the following:

"MenuBase"
"Sub1" (show)
"Sub2" (hide)
"Sub3" (hide)
"MenuHide" (show)

Make sure the Events are set to "onMouseOver"

It's important to have the "MenuHide" layer only show on the "onMouseOver" So that if you have text or links underneath or around the menu, the won't get covered by the transparent GIF, and not be clickable!

You should have something that looks like this:

Repeat this for "Menu 2", and "Menu 3" Showing and hiding the correct layers.

Step 8

Select the "MenuHide" layer, and click on the GIF...

Add a "Show-Hide Layers" and have it hide everything but the "MenuBase"

Set the following:

"MenuBase"
"Sub1" (hide)
"Sub2" (hide)
"Sub3" (hide)
"MenuHide" (hide)

Once again, make sure the Event is set to "onMouseOver"

Final Step

Double Check that all layers are hidden except for "MenuBase"
If you haven't already hit (F12) and preview it in a browser... BAM!!!!! You're done :)

Check out my finished menu here

(keep in mind that although the menu will work in Netscape, the "a:hover" will not, this is the only cross browser limitation)

Some more to think about...

Keep in mind that this is a very basic tutorial, and was meant for beginners to get an idea and techniques for making dynamic menus... this is in no way the limits of DW or DHTML. Using your creativity and skills can produce some outstanding results... If you always plan ahead, creating some impressive menus doesn't take that long... Experiment with adding timelines and sub menus, Timelines can be Dreamweavers best friend sometimes... Experiment with background images and play around with the style sheets... Don't let this tutorial become your limit, and never be afraid to expand...

Kevin Ostrowski
kjostudio@hotmail.com
http://www.worldoffx.com/kjostudios

 


© 2000 Kevin Ostrowski, all rights reserved