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
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.
IE 8 and below do not support this CSS3 feature. The menu degrades nicely with no rounded corners in those browsers.
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"
};
- 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.
To prevent the sub-menu from being too sensitive, give a delay in milliseconds before sub-menu opens on mouse over.
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.
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:
-
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.) -
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 should also be licensed.
License Fee: $16.00 - 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
- How the license works? Does it go to another web service to verify? Answer
- Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
- Will it work for sub-domains? Answer
- My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
- Do you provide developer license that can be applied to multiple websites? Answer
- I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
- Do I need to renew the license for future upgrades/releases of the widget? Answer