Online Drop Down Menu Generator

ddmenu: Build Your Menu Online

WHAT YOU SEE IS WHAT YOU GET

Choose a template:   1   2   3   4   Effect:   ... more customizations under the HTML and CSS tab

New update: Release v2014.5.20 (log)

Make the menu responsive and mobile-friendly

 

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.

Building Steps:

  1. Choose a template from above that is close to your desired style
  2. (optional): Edit your menu markup under the HTML tab
  3. (optional): Customize menu style under the CSS tab
  4. Download the source code under the Download tab
  5. (optional): Further customization
  6. Purchase a license($20) before going live to server

ddmenu Features

  • Build online
  • Open dropdown menu on click or hover
  • One menu on all pages support
  • The menu can be placed inside invisible element(display:none) when page loads (such as in a hidden tab content)
  • Allow multiple menus in one page
  • 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.
  • Fully customizable
  • Search Engine Friendly
  • Start the menu on DOMContentLoaded instead of window.onload
  • Supported by all major browsers and smart phonescross browser
    IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, mobile devices, touch-screens(including IE 10, IE 11) ...
  • The menu supports both mouse and touch input methods on touch-enabled screens (including IE 10, IE 11 on Windows 8, Windows Surface)
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
  • Image Size:
    If sub-menus contain images, the image size must be explicitly declared (via inline style or CSS class). e.g.:
    <img src="img1.jpg" style="width:200px; height:175px;" />
  • One Menu for All Pages
    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.
Top-Level Menu ( Main Menu )
menu width:       height: px       item alignment ?
background   image       border color  
rounded corner       drop shadow       ?
link         bold     ?     ?    padding left/right px ?
hovered link with no sub-menu ?       ?       background
hovered link with a sub-menu      ?

Sub-Menu ( Sub-Level )
padding px    background     border
rounded corner      drop shadow
column width ?    
text            bold            
link ?         bold                   underline
link (hovered)               underline

NOTE: It will always be {effect: "fade"} in the downloaded ddmenu.js. You can manually update it to other effects if desired. Click the above "Further Customization" tab for details.


Release v2014.5.20

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.
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",  //or "fade", or "none" open: "onmouseover",  //or "onclick" speed: 200, delay: 90, license: "mylicense" };
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.
  • Full width sub-menu

    Full width sub-menu Want the sub-menus span across the full width of the main menu? Read How to make full-width sub-menu.
  • Offset

    The left and right property of the drop, dropToLeft, and dropToLeft2 classes in the ddmenu.js can be customized for the desired sub-menu offset.
  • 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 desired values.
License Fee: US$20.00
Buy License Now
  • 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 trial version alert if the verification fails.
  • Under local development environment(localhost server or local file path), you can use the license "6c0l6"(the second last character is the lowercase of "L") to disable the reminder.
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= { ......, license: "123ab" };

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 ("fade", or "slide", or "none")
fade effect is new since v2013.12.1

Menu structure:

The menu is structured as:
<nav id="ddmenu"> <ul> <li>...</li> ... ... <li>...</li> </ul> </nav>
Benefit of using NAV tag
HTML5 NAV tag support:
  • Don't worry about the browser support for the HTML5 nav tag used here. The menu script has made it work across all browsers.
  • You can change the nav tag to div tag if you want

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.

Sub-menu:
Each sub-menu is a div block following the top-level item. It should contain one or multiple sub-menu columns (discussed below).

You can add classes to each sub-menu DIV block to acquire particular styles, such as the dropToLeft and dropToLeft2 classes added to the HTML and defined via the CSS file to give the sub-menu a different offset (dropdown postion).

Sub-menu columns:
They are DIV blocks with class="column" within the sum-menu block. Any sub-menu content must be placed inside those columns.

Flexible Markup:
You can easily add rich HTML content to the menu such as images or other markup. For example, we've added some DIVs inside the sub-menu columns under the fourth main menu item in order to get an indent from the captions above them. The indent is defined in the CSS:

.ddmenu div.column div { padding: 0px 10px; /*sub-div within div.column*/ }
The rounded corner and drop shadow in this API are hard-coded with fixed values and colors. You can later edit them in the downloaded CSS file.

These are CSS3 features that are not supported by IE 8 and below. The menu degrades nicely with no rounded corners/shodows in those browsers.

Examples: auto, 100%, 80%, 970px.

Choosing auto will result in a minimal width required by the menu items

How to prevent menu from wrapping into two lines?

This specifies the link text color when the link is hovered.

The background color of the hovered menu item will be defined by the Sub-Menu's background color below. They should be the same.

Each sub-menu block should contain one or multiple column blocks (see the HTML markup). Here is to specify the width of each column.

For example: auto, or 140px

Note:

If a column contains images:
  • The width and height of each image should be explicitly defined.
    e.g. <img src="img1.jpg" style="width:200px; height:175px;" />
  • If the column width is a value in pixels (not auto), and the value is smaller than the image width, you must overwrite the column width with the menu HTML code:
    • by inline style: For example:
      <div class="column" style="width:200px;text-align:center;">
    • or by another class: For example:
      <div class="column cls2">
      And specify the width for cls2 in your CSS.
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 ...