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:
- 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>
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.
- 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"
};