Introduction to Vertical CSS Menu

The following tutorial will show you step by step how to quickly create a simple vertical CSS menu from scratch.

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

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 CSS Menu icon VMenu_icon by accessing the PluginLab panel, or go to Insert > PluginLab > Vertical 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 CSS Menu icon VMenu_icon or go to Tools > Vertical CSS Menu.

 

1. Create Your Vertical CSS menu structure:

Start your Vertical 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 Vertical CSS menu.

intro_vm_step2

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.

intro_vm_step3

Click the previewbutton_21 button. Using the default settings in Vertical CSS Menu, here is what you should see in the preview window:

intro_vm_step4

 

2. Customize your drop down menu settings

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

intro_vm_step5

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.

intro_vm_step6

Now go to the Colors tab and define your color scheme for the vertical CSS menu system you create.

In the provided vertical CSS menu example we use the following color settings:

intro_vm_step7

For Font style we use Arial font, size 11.

 

3. Preview your 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:

intro_vm_step8

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

 

4. 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 updatepagesbutton_21 button to add the dropdown menu you create to numerous pages of your site.

 

For more information see:

Your Account |  Store | Contact