Creating a 2 level Horizontal Image CSS Menu

The following tutorial will show you step by step how to create a 2 level horizontal image 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 Image CSS Menu

Adobe Dreamweaver Extension:

Use Dreamweaver Extension Manager to install and uninstall all Dreamweaver Extensions.

To get started using Dreamweaver, click the Horizontal Image CSS Menu icon HIMicon by accessing the PluginLab panel, or go to Insert > PluginLab > Horizontal Image 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 Image CSS Menu icon HIMicon or go to Tools > Horizontal Image CSS Menu.

 

1. Create Your Horizontal Image CSS menu structure:

Start your Horizontal Image CSS menu extension and press the addmenubutton_20 button 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 the addbutton_18 button to add each new entry of your Horizontal Image CSS menu.

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

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

For creating round main menu and flyouts edges we use heading elements. To add a Heading press the addbutton_18 button to create a new menu item and then change its type from Normal to Heading in the Type combobox.

In the example image menu we add headings 1st and the last menu items of the main navigation, second horizontal level and of each drop down section. Plus headings are used for naming sub categories of flyouts.

 

2. Add your menu images

Select images for each button by clicking the folder_18 icons to browse and insert a normal, over and down/selected state.
It's a good practice to define images for all 3 states of your dropdown menu buttons, but in the preset sample we will only enter the normal and over images.

Click the Set Default button to set the 3 current images as the Default images. Once these images are set up you can easily apply them to your menu system with one click.

Note: The Default images are automatically applied to any new menu item added to the menu structure.

Then, choose a button in the menu structure tree and click the Get Default button to insert the default images.

Similarly, select a button in the menu structure tree and click Apply All to insert the default images into all buttons of the level you are currently in.

The Horizontal Image CSS Menu extension automatically detects image sizes as they are inserted and displays the dimensions in the Width and Height fields. You can easily edit these numbers to get your button text fit these images.

 

3. Tune your drop down menu settings

To set your second horizontal level of your menu system go to the Second Level Settings and select the Horizontal level layout.

After this set your background images. Here are the settings we use in the sample 2 level horizontal image CSS menu system:

In the Flyout settings section choose Open/Close animation effects and customize the style options for your drop down menu.

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

On the Text settings tab you may customize font styles, size, weight, decorations, colors you like. Also you can easily define top and left padding in pixels for normal button text and headings for main menu, 2nd level items and flyouts.

For main level of our horizontal image CSS menu example we use the following settings:

For second horizontal level and flyouts we use the same font but with the size 12 normal weight (except the headings' bold) and text color set to # 38612B for all states. For flyout menu items we have the left padding defined to 15 px.

 

4. Preview your image CSS menu:

Click the previewbutton_21 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 addupdatebutton_22 to Add the horizontal image 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 image 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 updatepagesbutton_21 button to add the dropdown menu you create to numerous pages of your site.

 

For more information see:

Your Account |  Store | Contact