Dropdown Menu demo's

HTML and Javascript code

<h4>Dropdown menu with a simple menu title</h4>
<div id="ddMenu1" title="Click here">
  <span>Products</span>
  <ul>
    <li><a href="#">Multimedia</a></li>
    <li><a href="#">TV & Audio</a></li>
    <li><a href="#">Electro</a></li>
    <li><a href="#">Telephony</a></li>
    <li><a href="#">Accessories</a></li>
  </ul>
</div>

<script type="text/javascript">
  // Execute on page load
  $(function () {
    // Initialize dropdown menus, checkboxes, ..
    $('#ddMenu1').ddmenu();
  });
</script>

Quite simple! You must have a container <div> in which you define:

• A <span>text</span> where you define the menu text/title.
• An <ul>..</ul> unordered list where you assign each menu item to an <li><a href='..'></a></li> element.

Then use some standard jquery javascript to bind and instantiate the jquery dropdown menu object.

HTML and Javascript code

The way to setup the HTML and javascript part is completely the same as for the standard dropdown menu shown above.

The only difference is the menu up/down arrow that has to be hidden here. You must do this by overriding the standard <span> style that comes with the CSS file as follows:

<style>
  /* Set right padding same as left (missing arrow) */
  #ddMenu2 > span {
    padding-right: 0.416em;
  }
  /* No up/down arrow */
  #ddMenu2 > span:after {
    content: none;
  }
</style>

HTML and Javascript code

Again, the HTML and javascript part are completely the same as in the 2 above examples.

To have an image (icon) in the menu title you must override the standard <span> style that comes with the CSS file as follows:

<style>
  /* No up/down arrow */
  #ddMenu3 > span:after {
    content: none;
  }
  /* Menu with an icon */
  #ddMenu3 > span {
    width: 29px;
    height: 19px;
    padding: 0;
    background-image: url(../../Content/Project/Images/toc-inactive.png);
    border: none;
  }
  #ddMenu3:hover > span {
    background-image: url(../../Content/Project/Images/toc-active.png);
  }
  #ddMenu3.ddMenuOpen > span {
    background-image: url(../../Content/Project/Images/toc-pressed.png);
  }
</style>

HTML and Javascript code

If you want to have one or more items in the menu list that should not be selectable then you can do this by specifying class="noNav" for their <li> element. The text that you want to show for the item will be the inner text of the element.

<div id="ddMenu4" title="Click here">
  <span>Welcome John Smith</span>
  <ul style="width: 500px;">
    <li class="noNav">Je are registered as John Smith (j.smith@provider.com)</li>
    <li><a href="#">Your account</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</div>

Note also the inclusion of style="width: 500px;" for the <ul> element. This allows you to set the width of the dropdown to whatever you like.

HTML and Javascript code

To align the dropdown (popup part) on the right side of the menu title simply add a style="right: 0;" style definition to the <ul>..</ul>.

<div id="ddMenu5" title="Click here for a right-side aligned dropdown menu">
  <span>Products</span>
  <ul style="width: 250px; right: 0;">
    <li><a href="#">Multimedia</a></li>
    <li><a href="#">TV & Audio</a></li>
    <li><a href="#">Electro</a></li>
    <li><a href="#">Telephony</a></li>
    <li><a href="#">Accessories</a></li>
  </ul>
</div>