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

Requirements:

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

Adobe Dreamweaver Extension:

Dreamweaver Extension Manager to install and uninstall all Dreamweaver Extensions.

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

 

1. Create Your Vertical Image CSS menu structure:

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

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.

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

 

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 Vertical 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 Vertical 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 150px, the flyout padding to 1px so that the submenu sections do not touch, enable the parent button mouseover and use the Fade In/Out 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 Vertical Image CSS menu example we use the following settings:

• Font: Verdana,
• Size: 12 px for main item, 11 px for flyouts,
• Center alignment for heading items,
• 12 px left padding for main items and dropdowns.

For main menu normal text we use the color # BFCACCБ, and the color # FFFFFF for the rest of the solor settings for main items.

The following color scheme was applied to submenus of the example Vertical 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