Build Your Tab Menu Online

Template:   1 2 3 4

Tab Menu - Online Tab Menu builder

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

Features

  • 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
  • Supported by all major browsers
    IE 7.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 multiple menus in one page
  • License Fee: $20.00
    About License
? Directions

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.

Third-level menu:
An UL block under the secondary-level item.
  • 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

Build Menu Dynamically

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

Please visit Build menu dynamically for details.

menu width:       background image
Examples: 100%, 80%, 970px.
border  top-level       border color  
Top-Level Menu ( Main Menu )
item alignment ?       height: px       tab? background
The alignment of top-level menu items.
spacing between tabs  px       padding left/right px ?      rounded corner ?
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.

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

Download the source code of the customized menu.

It includes: an HTML page containing the menu markup, a CSS file, a JavaScript file, and background images.


You can further customize the downloaded tab menu by modifying its source code.

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, strictUrlMatch: false, defaultIndex: -1, license: "mylicense" };
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 applicable 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).

true or false. Specify if the active menu item should be matching exactly what the page URL is.

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 the strictUrlMatch has been set to false.

the index (0-based) of the tab to be selected when the page URL does not match any of the menu items. Set it to -1 if you want "no match, no active".

Determine the Active Menu Item

As illustrated in the above strictUrlMatch option, the menu item that best matches the current page URL will be selected when the menu is loaded.

You can override that 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> tabmenu.select("p22"); </script>

Customize the CSS


The menu style is fully customizable by editing the downloaded CSS file.

License

  • License is required before the slider goes live on web server. Otherwise a trial version alert may appear on the page.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains are also allowed.
    License Fee: $20.00
  • The license can be used by any Menucool horizontal menus:
    Drop Down Menu, Tab Menu or CSS Menu
  • You can use the licensed widget multiple times within the website for which you've purchased the license.
  • When you have acquired the license, open the tabmenu.js file with Notepad, and update the license value accordingly. var tabMenuOptions = { ......, license: "123ab" };

FAQ about License

  1. How the license works? Does it go to another web service to verify? Answer
  2. Will it work for sub-domains? Answer
  3. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  4. Do you provide developer license that can be applied to multiple websites? Answer
  5. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  6. Do I need to renew the license for future upgrades/releases of the widget? Answer
You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).
Yes. License is required for intranet websites, and you can apply for license for intranet domains.
No. It is on a per-domain basis only.
Yes, it is supported. The following links are the instructions:

For JS Image Slider     For Ninja Slider     For ddmenu     For JS Tooltip

Note:
  • If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
  • If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input 1/2 of the price for the second domain, 1/3 for the third domain and so on.
No. The license will be valid forever for your domain with no requirement to renew.

QUESTION & ANSWER
More ...

 

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