Align with main menu   Align with parent menu item

Demo of Vertical Menu

Vertical Menu

The menu was inspired from Porsche USA.

What impressed us is the positioning of its sub-menus: the fly-out usually aligns itself with the link that pops it up, but if the fly-out is vertically out of alignment with the main menu, it will instead adapt itself to align with the main menu (see demo above).

The Javascript is 1.5k only.

Features:

  • Free to use (including commercial)
  • CSS and Javascript driven
  • Unlimited sub-menus
  • Options to enable/disable sub-menu alignments with the root-level menu
  • Supported by all major browsers
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+

HTML:

<ul id="menu-v"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Item 3</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a> <ul class="sub"> <li><a href="#521">Vertical Menu 5.2.1</a></li> <li><a href="#522">Vertical Menu 5.2.2</a></li> <li><a href="#523">Vertical Menu 5.2.3</a></li> <li><a href="#524">Vertical Menu 5.2.4</a></li> <li><a href="#525">Vertical Menu 5.2.5</a></li> </ul> </li> <li><a href="#">Sub Item 5.3</a> <ul class="sub"> <li><a href="#">Sub Item 5.3.1</a></li> <li><a href="#">Sub Item 5.3.2</a></li> <li><a href="#">Sub Item 5.3.3</a></li> <li><a href="#">Sub Item 5.3.4</a></li> <li><a href="#">Sub Item 5.3.5</a></li> <li><a href="#">Sub Item 5.3.6</a></li> <li><a href="#537">Vertical Menus 5.3.7</a></li> <li><a href="#538">Vertical Menus 5.3.8</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 6</a></li> </ul>

Instructions:

  1. Download the CSS file.
  2. Download the Javascript file.

    Open it with Notepad and you will find its first line is: var mcVM_options={menuId:"menu-v",alignWithMainMenu:true};
    This enables the "alignment with main menu" feature. You can disable it by setting: alignWithMainMenu:false
  3. Edit your menu HTML on the page. Please refer to the markup structure in the above HTML section.
  4. Add the CSS and Javascript links into the head section of the page: <link href="/(directory)/menu-vertical.css" rel="stylesheet" type="text/css" /> <script src="/(directory)/menu-vertical.js" type="text/javascript"></script>

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.