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 (Non-jQuery, no other plug-ins).

 

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 cross browser
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+

 

HTML:

Search Engine Friendly:
The HTML provides a clear hierarchy to the search engines such as Google and Bing.
<ul id="menuV2"> <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.

    Its first line is: var alignWithMainMenu=true;
    This enables the "alignment with main menu" feature. You can disable it by setting: var 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)/menuV2.css" rel="stylesheet" type="text/css" /> <script src="/(directory)/menuV2.js" type="text/javascript"></script>


Ask Questions / Leave a Comment

Question Title:
Your name:
+ =