A tutorial for service.ddmenu.jquery - Single Level Dropdown Menu

November 15, 2014

Overview

service.ddmenu.jquery is an extremely lightweight (less than 800 bytes minified) jquery component that makes it easy to create individual, single-level dropdown menus on a web page. The dropdown menu itself must be fully designed in HTML (as per an imposed container layout). The plugin does't insert nor replaces elements in the DOM.

What it does is:

• It inserts some classes in the menu markup to style the menu title and the menuitems that popup when you click the menu.
• It hooks up event handlers to open and close the popup menuitems.

Demo

Click here for a demo.

Download

You can download the latest version of the plugin at GitHub.

Usage

To use the plugin start with adding the following in your header section:

<link rel="stylesheet" type="text/css" href="[your-path]/service.ddmenu.jquery.css" />
<script src="[your-path]/service.ddmenu.jquery.min.js"></script>

In your html, define the dropdown menu as follows:

<div id="ddMenu1">
  <span>Menu Title</span>
  <ul>
    <li><a href="<url>">Menuitem 1</a></li>
    <li><a href="<url>">Menuitem 2</a></li>
    <li><a href="<url>">Menuitem 3</a></li>
    ...
    <li><a href="<url>">Menuitem n</a></li>
  </ul>
</div>

Note: You must closely adhere to the above markup. The container <div>, the <span> menu title, and the <ul> menuitems list with the anchors in each <li> element are all mandatory.

Then, write some javascript to construct the plugin object and link it to the dropdown menu.

<script type="text/javascript">

  // Execute on page load
  $(function () {

      $('#ddMenu1').ddmenu();

  });

</script>

Styling

To style the dropdown list the plugin comes with a CSS file that contains a couple of classes to help in styling both the menu title and the internal menuitems. The classes are inserted by the plugin but if you want to setup your own styles you need to understand how the list is defined inside the DOM.

<div id="ddMenu1" class="ddMenu ddMenuOpen">
  <span>Menu Title</span>
  ::after
  <ul class="ddMenuDropDown">
    <li><a href="<url>">Menuitem 1</a></li>
    <li><a href="<url>">Menuitem 2</a></li>
    <li><a href="<url>">Menuitem 3</a></li>
    ...
    <li><a href="<url>">Menuitem n</a></li>
  </ul>
</div>

• The root container will get class=""ddMenu" when the menu is constructed.
• When the menu is opened class ddMenuOpen is added to the root container. This class is removed when the menu is closed.
• The unordered list will be assigned class="ddMenuDropDown".
• The CSS file that comes with the plugin inserts an arrow after the menu title by using a span::after selector. If you want to remove the arrow you must override this with content: none;.
• It is possible to exclude one or more <li> menuitems from being selectable by adding class="noNav" to their element. See demo for an example.
• By overriding the <span> style you can have any type of menu title you want: text, an image, etc.

API

Initialization method

[jqObject(s)].ddmenu()

There are currently no options supported to configure the plugin.

Other methods

None.

Comments

comments powered by Disqus