Demo of CSS Menu

Template 1   Template 2   Template 3   Template 4   Template 5  

Menu Alignment and Layout

CSS Menu

  • HTML: Search engine friendly
  • Fully based on CSS: extremely easy, light weight and high performance
  • Allow rounded corners and drop shadows without using any border/shadow images
  • CSS3 in older IE browsers:
    VHM technique is used in the HTC file that makes the CSS3 rounded-corner and drop-shadow features also available for IE8 and earlier (for top-level menu only, not for sub-menus).
  • Supported by all major browsers
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • License Fee: $7.00
    About License

The source code has three parts: HTML, CSS and the menucss.htc file.

1. Choose a template:

Choose a template from above that suits your own style. The CSS link listed below will change accordingly.

2. HTML:

<ul id="menuCss" class="menuTemplate1 decor1_1" license="mylicense"> <li><a href="#CSS-Menu">CSS Menu</a></li> <li class="separator"></li> <li><a href="#Horizontal-Menus" class="arrow">Horizontal Menus</a> <div class="drop decor1_2" style="width: 640px;"> <div class='left'> <b>CSS Menu</b> <div> <a href="#">Html 5 menu</a><br /> <a href="#">Web menu CSS</a><br /> <a href="#">Css menus</a><br /> <a href="#">Nav element</a><br /> <a href="#">SEO menu</a> </div> </div> <div class='left'> <b>Menu Templates</b> <div> <a href="#">Menu template</a><br /> <a href="#">Menu skin</a><br /> <a href="#">Web menu styles</a><br /> <a href="#">Best css menus</a> </div> </div> <div class='left'> <b>SEO Friendly</b> <div> <a href="#">Search engine friendly</a><br /> <a href="#">Best css menu</a><br /> <a href="#">Most popular menus</a><br /> <a href="#">Best web menu designs</a><br /> <a href="#">E-Commerce sites</a><br /> <a href="#">CSS Templates</a><br /> <a href="#">Menu Design Templates</a><br /> <a href="#">Clean layout & alignment</a><br /> <a href="#">Favorite menus</a> </div> </div> <div class='left' style="text-align:right; width:200px;"> <img src="../img/demo/hd6.png" style="width:128px; height:128px;" /><br /> Search Engine friendly </div> <div style='clear: both;'></div> </div> </li> <li class="separator"></li> <li><a href="#CSS">CSS</a></li> <li class="separator"></li> <li><a href="#Horizontal-Menu-CSS">Horizontal Menu CSS</a></li> <li class="separator"></li> <li><a href="#Web-Menu" class="arrow">Horizontal Web Menu</a> <div class="drop decor1_2 dropToLeft2" style="width: 500px;"> <div class='left'> <b>SHOPPING TOOLS</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> <b>RSS FEED</b> <div> <a href="#">Find a location</a><br /> <a href="#">Request a test drive</a><br /> <a href="#">See All ...</a> </div> </div> <div class='left'> <b>BE CREATIVE</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> </div> <div class='left' style="text-align:right; width:160px;"> <img src="../img/demo/hd7.png" style="width:128px; height:128px;" /><br /> Contact Us </div> </div> </li> <li class="separator"></li> <li><a href="#Web-Menus" class="arrow">Web Menus</a> <div class="drop decor1_2 dropToLeft" style="width: 460px;"> <img src="../img/demo/css-menu-t3.jpg" style="float:left; width:98px; height:180px;margin:10px 80px 10px 40px;" /> <div class='left'> <b>PURE CSS MENU</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> <b>POPOUT MENU</b> <div> <a href="#">Find a location</a><br /> <a href="#">Request a test drive</a><br /> <a href="#">See All ...</a> </div> </div> </div> </li> </ul>

3. CSS:

Download the CSS file for template 1

Visit Menu Alignment and Layout for tuning the menu layout.

4. menucss.htc file:

Download the menucss.htc

Without the HTC file, the menu will not work properly in IE 8 and earlier.

  • IE5 and later support the CSS behavior property. The behavior property is linking to an HTC (HTML Component) file. The HTC behavior file is actually an HTML file that contains the defined components and a script in order to implement Dynamic HTML.

    The CSS behavior is defined as below in the CSS file: .menuTemplate1 { ... behavior: url("/horizontal/menuh/cssmenu.htc"); }
  • If relative path is used, htc file path inside the CSS file should be relative to the page instead of the CSS file (this is unlike image links inside the CSS that are relative to the CSS file location). It is recommended to use the absolute path for the HTC file URL.
If you did not pass the testing in IE browsers, please read the following two posts:
  • Sub-menus are DIV elements with class="drop". By default each sub-menu is aligned with its parent LI element through the following CSS: .menuTemplate1 li:hover .drop { left: -1px; top: auto; } You can easily modify the alignment by changing the left and right style properties. For example, the submenu under the menu item "Web Menus" was added a class "dropToLeft"(class="drop decor2 dropToLeft") which is styled as: .menuTemplate1 li:hover .dropToLeft { left: auto; right: -1px; top: auto; } And the submenu under the menu item "Horizontal Web Menu" was added a class "dropToLeft2"(class="drop decor2 dropToLeft2") which is styled as: .menuTemplate1 li:hover .dropToLeft2 { left: auto; right: -60px; top: auto; }
  • The "position: relative;" inside CSS selector ".menuTemplate1 li" makes the submenu to drop down from the position of the opening link. If you want it to be positioned relative to the whole menu instead of the opening link (like the White House menu), remove the position: relative; from .menuTemplate1 li and add it into .menuTemplate1 selector.
  • All opening links should be assigned a class="arrow" so that it will show an arrow image indicating that a sub-menu is available.
  • If you want a top-level item to be aligned to the right, add a class "menuRight" to its container "LI" element. The last item of demo 2 below has been aligned to the right by this approach.
  • Add class "decor1" to the menu's root node (<ul class="menuTemplate1 decor1">), or add class "decor2" to its sub-menus (class="drop decor2") if special visual effects are required such as drop shadow, rounded borders, etc.
  • Each sub-menu should specify a proper width (e.g. <div class="drop decor2" style="width:360px;">)

License

  • License is required before the slider goes live on web server. The license legally entitles you to deploy the HTC file to a single production site.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.
    License Fee: $7.00
  • The acquired license should be embedded into the menu's HTML code as shown below. If the page is viewed with IE 8 or earlier, the menucss.htc file will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the menucss.htc file itself will do the checking and no other external services will be involved. If the verification fails, the menu will periodically show a purchase reminder.

  • How to install the license

    Add a license attribute to the root element of the menu, and set its value with the acquired license key: <ul class="menuTemplate1" license="mylicense"> ...
▲