ddmenu: Build Your Menu Online

Effect:  
Template:   1 2 3 4

Online Drop Down Menu Generator

Need responsive version for mobile?

Check out Make the menu responsive and mobile-friendly

Release v2014.9.16 (log)

 

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 license
    License Fee: $20.00
    About License

ddmenu Features

  • Build online
  • Open dropdown menu on click or hover
  • One menu on all pages support
  • 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. Look at Further Customization for details.
  • Search Engine Friendly
  • Start the menu on DOMContentLoaded instead of window.onload
  • Supported by all major browsers and smart phones
    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.

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*/ }
Top-Level Menu ( Main Menu )
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?

menu width:       height: px       item alignment ?
background color     border color  
rounded corner       drop shadow       ?
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.

link         bold     ?     ?    padding left/right px ?
hovered link with no sub-menu ?       ?       background
hovered link with a sub-menu      ?
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.


Sub-Menu ( Sub-Level )
padding px    background     border
rounded corner      drop shadow
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.
column width ?    
text            bold            
link ?         bold                   underline
link (hovered)               underline
  • You can either select a template and download it immediately, and update it later by manually configuring the ddmenu.html and ddmenu.css files in the download package.
  • Or you can firstly set it up by this online menu builder tool (under the HTML and CSS tab), and then download what you have configured.

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

Customize the JavaScript

Open the ddmenu.js in the download with Notepad, and update the options to suit your needs:

var ddmenuOptions= { menuId: "ddmenu", linkIdToMenuHtml: null, effect: "slide",  //or "fade", or "none" open: "onmouseover",  //or "onclick" speed: 200, delay: 90, 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 One Menu for All Pages for details.
effect:   Sub-menu toggle effect ("fade", or "slide", or "none")

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

  • License is required before the slider goes live on web server. Otherwise a trial version alert may appear on the page.
  • Under local development environment (localhost server or local file path), you can use the license "6c0l6" to disable the trial version reminder.
  • 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 ddmenu.js file with Notepad, and update the license value accordingly. var ddmenuOptions = { ......, 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.