Tab Menu - Online Tab Menu builder

Build Your Tab Menu Now
Templates: 1   2   3   4

Online Tab Menu Generator (what you see is what you get)

  • Step 1: Choose a template from above that is close to your desired style
  • Step 2 (optional): Edit your menu markup under the HTML tab
  • Step 3 (optional): Customize menu style under the CSS tab
  • Step 4: Download the source code under the Download tab
  • Step 5 (optional): Further customization


  • Build online
  • Keep menu source in one place support
  • Automatically select the menu item that best matches the current page URL. You can also use the built-in select function to select a desired tab (usually used when the menu does not contain the current page URL)
  • Support Build menu dynamically
  • Built menus are supported by all major browsers CSS Menu cross browser
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • Start the menu on DOMContentLoaded instead of window.onload
  • Allow rounded corners without using any border/shadow images. Degrades nicely in old browsers such as IE 6 - IE 8 that does not support this CSS3 feature.
  • Fully customizable, as simple or as complex as you want
  • Search Engine Friendly
  • Allow multiple menus in one page
  • License fee: $20
  • Edit your menu markup and click the Apply button to preview
  • You can also edit it later by directly editing the HTML document in the downloaded package
menu width:       background image
border  top-level       border color  
Top-Level Menu ( Main Menu )
item alignment ?       height: px       tab? background
spacing between tabs  px       padding left/right px ?      rounded corner ?
link     bold   ?   color:
link (active)   color:

Sub-Menu ( Secondary-Level )
item alignment ?     height px     background
padding left/right px ?     rounded corner
link           bold      
link (hovered / active)                underline

Release v.2013.3.18

Download the source code of the customized menu. It includes: an HTML page containing the menu markup, a CSS file, a JavaScript file, and required images.

After the download, you can optionally further customize the menu through the JavaScript and the CSS document.

Determine the Selected/Active Menu Item

By default, the menu item that best matches the current page URL will be selected when the menu is loaded.

For example, the current page is "/a.htm?b=1&c=2", then the link of "/a.htm?b=1&c=2" in the menu will be active. If you don't have the menu link "/a.htm?b=1&c=2", but you have "/a.htm?b=1", then "/a.htm?b=1" will be active. If none of the menu items match the current page URL, the first tab will be active.

You can override above mechanism by utilizing the built-in select function.
Here is a sample implementation:

  1. Give an id to the LI:
    say you open the page p1.html, but you want the menu link of p22.html to be active, then you can give an ID, say id="p22", to the LI element that contains the link of p22.html; Or give the id to the above LI's parent LI if you don't want the menu link of p22.html to be active so as to avoid that the p22.html link looks like it is current p1.html page.
    (If your system cannot set IDs for LI element, give the ID to the hyper links (anchors) is also acceptable.)
  2. Select the ID:
    At the end of the page p22.html, just before the closing tag of </body>, add the following script:
    <script>"p22"); </script>

Build Menu Dynamically

Menucool Tab Menu has a built-in function, init(), that helps building the menu on the fly, or at any time you want.

Please visit Build menu dynamically for more details.


Customize the JavaScript

Open the tabmenu.js file in the download package with Notepad and you will see:
var tabMenuOptions = { menuId: "tabmenu", linkIdToMenuHtml: null, preview: true, delay: 200, speed: 0.04, license: "mylicense" };

menuId:  the menu id specified in the HTML markup

linkIdToMenuHtml:  null by default. If you want to store your website menu in a separate file so that you do not need to cut and paste the menu HTML code on every page, you can assign linkIdToMenuHtml with a link ID that links to the separate menu file. Please refer to Keep menu source in one place for details.

preview:   true or false.

  • true: Move your mouse over a tab (1st-level menu item), and a 2nd level content will appear beneath it.
  • false: The 2nd level content of inactive tab will not show up while your mouse is hovering over the tab. You have to click the tab to navigate to the page to see its sub-menu items.

delay: (only available when preview is true)
To prevent the sub-menu from being too sensitive, give a delay in milliseconds before sub-menu opens on mouse over.

speed: (only available when preview is true)
Animation speed for displaying secondary level content. The value should be between 0 - 1 (The higher the value, the faster the animation).

license:  place to put your license.   Click the License tab above for details.


Customize the CSS

The menu is fully customizable by editing the CSS file in the downloaded package.
License Fee: US$20.00
Buy License Now
  • A license is required before the Tab Menu goes to production.
  • License is issued on a per-domain basis (valid for one domain and its sub-domains)
  • The license can be used by any Menucool horizontal menus:
    Drop Down Menu, Tab Menu or CSS Menu
  • The license is valid forever for future updates/upgrades with no requirement to renew
  • After going live on the Internet, the license will be used to compare with the domain name on the browser's address bar for verification. There is no license check made to other places. The menu will periodically show a purchase reminder if the verification fails.
How to install the license
Use Notepad to open the downloaded script tabmenu.js, and replace the license property with the acquired license key. For example:
var tabMenuOptions =
    menuId: "tabmenu",
    linkIdToMenuHtml: null,
    preview: true,
    delay: 200,
    speed: 0.04,
    license: "123ab"

The alignment of top-level menu items.

The Tab Menu supports up to 3-level horizontal menu using the standard UL - LI structure.

Top-level Items:
Top-level items can be links (e.g. <a href="...">item text</a>), text, or HTML content (e.g. <img src="tip.gif" /> Totam) within the <li>...</li> element.

Secondary-level menu:
Each secondary-menu is a UL block following the top-level item.
The rounded corner in this API is hard-coded with a fixed value. You can later edit it (the border-radius property) in the downloaded CSS file.

IE 8 and below do not support this CSS3 feature. The menu degrades nicely with no rounded corners in those browsers.

Examples: 100%, 80%, 970px.
For Your Information
  • You can input the color directly into the color field if you know the color hex value.
  • To set a transparent color, select the cell on the top-right corner in the color picker palette.
  • If you find a site that has the color that you like but do not know its color value, you can use a screen color picker. There are many out there on the Internet, such as ColorCop.

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...