The following tutorial will show you step by step how to quickly create a Horizontal image CSS menu from built-in menu presets.

Requirements:

For this tutorial you will need to install Horizontal Image 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

Once Horizontal Image CSS Menu is installed download this file that contains all the images you need to create the pop up menu in this tutorial.

 

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 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 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 button to load any of the numerous built-in presets. In the PluginLab Presets Viewer select the preset menu system you like and press the button. The selected menu will be loaded at once allowing you to customize it the way you need it.

To add the first menu level item, 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.

Note: Button text is optional. If your images have text on them, remove all text from the Text field.

Use the button to add all your buttons to your CSS menu.

To add a CSS drop down menu, simply type the button name and URL, choose the link target, add the button images, and use the button to great the drop down menu level.

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

For deleting the menu item of any levels simply press the button.

To add a Heading to your drop down menu you need to add a new item first by using the and then change the button type from Normal to Heading in the Type combobox.

Note: Headings are unlinkable and can not have flyouts.

 

2. Add your menu images

Select images for each button by clicking the 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. Customize your drop down menu settings

Define your menu position in the General tab -> Menu Position. You may:

• select Previous position in the Insert Menu at combobox to leave the code position intact.
• select Cursor position to insert the code to a new current cursor location.

You may want your menu to be absolutely positioned. If so, check the Use Absolute Position on Page box and specify coordinates in pixels to determine exactly where you want the menu to appear on the computer screen.

Check the Maintain Position on Scroll box to keep your Horizontal Image CSS menu visible while scrolling a browser window.

Open the Common Settings section in the General tab to use the vertical layout of the flyouts and set the minimum menu width to 100px.

In the Flyout Settings section we set the maximum flyout height to 230px, enable the parent button mouseover and Overlap parent option, use the Snap animation effect.

In the Button Settings section you may enable the highlight Selected option that the visitors to navigate your site customize and the Preload option. Also you can your default button images for your CSS menu.

You can easily set the desired transparency to your main menu level and flyouts in the Menu Transparency section.

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 fro both main menu items and flyouts.

For our Horizontal Image CSS menu example we use the following settings:

• Font: Arial,
• Size: 11px,
• Center alignment for the normal and heading items of the main menu button text,
• 25 px left padding for dropdowns.

The following color scheme was applied both for main menu items and for submenus of the example Horizontal Image CSS menu.

 

4. Optimize your CSS menu

Highly optimized search engine menu scripts can greatly improve your site's search engine placement and page rank. To improve the volume and quality of traffic to your web site from search engines select from show All links on the page, Top Only links or Optimized in the Search Engines Optimization section.

Implement accessible website pages and comply with Section 508 Level A standards by turning on the Keyboard Navigation support in the Accessibly section.

Set up your custom hotkeys for activating the keyboard support.

 

5. Preview your CSS menu:

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

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

Now press the 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.

 

6. 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 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
• How to install Premium Menu Templates Package