The following tutorial will show you step by step how to create a 2 level horizontal CSS menu.

Requirements:

For this tutorial you will need to install Horizontal CSS Menus using one of the following installation files:

1. Dreamweaver Extension for Windows
2. Dreamweaver Extension for Mac
3. Expression Web Addin
4. CSS Menu Studio

 

How to access Horizontal CSS Menu

Adobe Dreamweaver Extension:

Dreamweaver Extension Manager to install and uninstall all Dreamweaver Extensions.

To get started using Dreamweaver, click the Horizontal CSS Menu iconby accessing the PluginLab panel, or go to Insert > PluginLab > Horizontal CSS Menu.

The drop down menu icon is enabled when a blank or any of your existing pages is opened in Dreamweaver.

Microsoft Expression Web add-in:

To get started using Expression Web, click the Horizontal CSS Menu iconor go to Tools > Horizontal CSS Menu.

 

1. Create Your Horizontal CSS menu structure:

Start your Horizontal CSS menu extension and press thebutton to add a new menu.

To make the first menu level, type your button name and target URL in the Text and URL fields in the Setup tab. Choose the link target from the Open In options.

Use thebutton to add each new entry of your Horizontal CSS menu.

To make the second level flyout, simply type the button name and URL, choose the link target and use the button to move the button in and create a flyout.

By clicking the button you can easily create unlimited flyout levels. Use the icon to revert your flyout to main menu item.

2. Tune your drop down menu settings

Open the General tab -> Main Menu Settings and define your main menu items dimensions: width and height.

Here you can also define the main menu button text alignment.

To set your second horizontal level of your menu system go to the Second Level Settings and select the Horizontal level layout. After this define the second level items width and height. Here are the settings we use in the sample 2 level horizontal CSS menu system:

In the Flyout settings section set your flyout button width and height, choose Open/Close animation effects and customize the style options for your drop down menu.

In the example horizontal CSS menu we use the following flyout settings:

3. Customize color scheme for your dropdown menu:

Next step is to select the color styling for your 2 level horizontal menu. For making different color sections you need to add a Separator.

The example horizontal CSS menu system has different mouseover color settings for main level buttons and for 2^nd horizontal level as well as for flyout drop downs.

The defined default color scheme is applied to the 1^st horizontal menu level and looks like the following:

To create a different color palette for the second level begin by adding an unnamed item, between each main button and selecting "Separator/Section Start" in the Type combobox to convert the unnamed item to a separator.

Now set the colors for each Separator/Section to get the desired effect.

Note: All items before the first Separator/Section will inherit the color settings from the Default Colors.

Simply repeat this process for all sections of the menu until you get the desired effect.

Note: Without separators the flyouts would inherit the color settings form the parent item. Using separators allows you to select an entirely different menu color palette for each of these separated sections of the main menu.

Here are other settings applied in the example CSS menu:

• Font Verdana size 13 for main menu with center alignment and no decoration
• Font Verdana size 11 for second level with center alignment and italic decoration
• Font Verdana size 11 for flyouts with left alignment and italic decoration

Next step s to set your custom scrollers and arrows.

Open the Arrows tab and browse for the scrollers and arrows images suitable for the color palette of your horizontal menu system.

4. Preview your CSS menu:

Click the button to preview your drop down menu in the PluginLab preview window.

Using the settings provided, you should see something like this:

Now press the to Add the horizontal CSS menu system you create to the page, then save the page.

Note: Previews do not show the selected state of a button. To view the selected state you need to preview the menu on your site.

 

5. Experiment with your menu

Now re-enter the extension and the menu source is automatically loaded allowing you to edit and update your horizontal CSS menu. You can spend some time experimenting with the color, style, and animation settings. There are endless possibilities that you can choose from to seamlessly integrate your menu into your site.

When you're satisfied with the style, simply click the button to add the dropdown menu you create to numerous pages of your site.

 

For more information see:

• Using Get Default, Set Default and Apply All buttons
• Update a Menu Across a Site
• Making Separator Sections & Headings