You don't need to be a programmer, and you don't need to install any software. This Menucool online menu builder will help you to
create stylish and professional looking web menus in no time.
Online menu builder (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
- One menu on all pages support
- Built menus are supported by all major browsers
IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
- Allow rounded corners and drop shadows without using any border/shadow images. Degrades nicely in old browsers such as IE 8 that does not support these CSS3 features.
- Start the menu on DOMContentLoaded instead of window.onload
- Menu Templates
- Fully customizable, as simple or as complex as you want
- Semantic rendering for minimal HTML markup
- Search Engine Friendly
- Load on Demand support: If the menu markup is generated on the fly, or populated later via Ajax after the page load, you can initiate the menu at a later time.
See Customize the JavaScript for details.
- Allow multiple menus in one page
Directions
- Eidt 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
As described in
One Menu for All Pages, you can create a
ddmenu-source.html file with the menu code, and all your menus in your site can be generated from this single external file.
After the download, you can optionally further customize the menu through the JavaScript and the CSS document.
Customize the JavaScript
From the downloaded source code you will find the ddmenu.js file. Open it with Notepad you will see:
var ddmenuOptions=
{
menuId: "ddmenu",
linkIdToMenuHtml: null,
effect: "slide",
delay: 90,
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 One Menu for All Pages for details.
effect:
Sub-menu toggle effect ("slide", or "none")
delay:
To prevent the sub-menu from being too sensitive, give a delay in milliseconds before sub-menu opens on mouse over.
license: place to put your license. Click the License tab above for details.
Load on Demand: populate the menu dynamically
If your menu markup has not been declared on page load, you can:
- Build the menu HTML on the fly, such as through AJAX
- When the menu markup is ready, the following built-in function should be called (such as in the AJAX callback)
ddmenu.init();
Customize the CSS
Some styles are hard-coded into the CSS file that you can fine tune directly by editing the CSS file.
Offset
The left and right property of the drop, dropToLeft, and dropToLeft2 classes in the preset default demo can be customized for the desired offset of the dropdown sub-menu.border-radius & box-shadow
The rounded corner and drop shadow are hard coded. You can search for border-radius and box-shadow in the CSS file and update them with your desired settings.
- A license is required before the menu goes to production.
- The 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
- The acquired license should be set to the license property in the ddmenu.js file.
The JavaScript will use its own match pattern to verify the license with the domain name on the browser's address bar. So the JavaScript file itself will do the checking and no other services will be involved.
The menu will periodically show a purchase reminder if the verification fails.
How to install the license
Use Notepad to open the downloaded script file (ddmenu.js), and replace the license property with the acquired license key. For example:
var ddmenuOptions=
{
menuId: "ddmenu",
effect: "slide",
delay: 50,
license: "123ab"
};