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.



<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>


  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>


Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.