FF IE11+ Chrome

Ergo Drop Down Menu Control

Author: Jon Muller

Description: This is an elegant drop down menu that takes a regular UL list and transforms it into either an expanding menu, or standard drop down menu. There are many potential uses for it, such as a Table Of Contents to let users quickly jump to a section on your page, as a SELECT Menu replacement (you can grab the selected value using the "onselect" event handler), or just as a regular drop down menu.

I tried to make the menu behave similarly to a form select menu. That is, each menu entry spans one line and will never overflow, regardless of text length. You can change this behaviour by editing the CSS.

On mobile and small screen devices, the control will automatically become an expanding menu. I find this works best on those devices.

Expanding Menu Demo:

Expand Menu | Select First Menu Item | Unselect Menu

Drop Down Menu Demo:

Expand Menu | Select First Menu Item | Unselect Menu


Directions Developer's View

Step 1: This script uses two external files. Download them below (right click, and select "Save As"):

Step 2: Insert the following code into the <head> section of your page:

Select All

Step 3:  Add the below sample HTML markup to your page, which shows one UL Drop Down Menu control:

Select All

And that's it!

Ergo Menu Documentation

The HTML markup for a Ergo UL List Menu should look like this:

<div id="dropdown1" class="uldropdown">
	<div class="titletext">Select a Value</div>
	<ul>
		<li><a href="#chair1">Excellent Budget Ergonomic Chair with Adjustable L...</a></li>
		<li><a href="#chair2">High End Ergonomic Chair with Price Conscious Pric...</a></li>
		<li><a href="#chair3">Best Cushioned Budget Office Chair...</a></li>
		<li><a href="#chair4">Lockable Reclining High Back Chair...</a></li>
		<li><a href="#chair5">Long Lasting, Lightweight Ergonomic Office Chair...</a></li>
		<li><a href="#chair6">Why you need an Ergonomic Chair...</a></li>
		<li><a href="#chair7">Which is the Best Ergonomic Chair under $200?...</a></li>
	</ul>
</div>

Give the outer container DIV an unique ID value for each instance of Ergo Menu.

Then, in the head of your page, initialize the menu by calling new uldropdown() after the document DOM has loaded:

<script>
jQuery(function($){

	dropdown1 = new uldropdown({
		dropid: 'dropdown1', // id of menu DIV container
		overlay: false, // true = drop down, false = expanding menu
		onSelect($selected){ // when user selects a value
			$('#output').val('Selected Text: ' + $selected.text() + '\n\n' + 'Selected Value: ' + $selected.attr('href'))
			console.log($selected.text())
		}
	})
})
</script>

where "dropdown1" should be an arbitrary but unique variable name. You can then reference this variable elsewhere on the page to dynamically expand, contract, or select/deselect the menu.

As you can see, the uldropdown() function takes a few options. Here's an explanation of all of them:

 

Attribute Description
dropid: string

Required

The ID of the drop down menu's outermost DIV container.
overlay: Boolean

defaults to false

Boolean (true|false) to control whether the UL within the menu should drop down and overlay elements beneath, or simply expand, pushing the rest of the page downwards.

On mobile devices and smaller screens, the menu will automatically switch to overlay: false, so the UL expands and contracts. You can configure the threshold when that happens by editing the screen size value inside uldropdown.css:

@media only screen and (max-width: 550px) {
}
onselect($selected)

Defaults to function(){}

Defines a callback function that's executed whenever the user makes a selection within the UL drop down menu. Use the $selected parameter to access the selected link. $selected is a jQuery object representation of the link, so  you can do things like the following to access various aspects of the link:
$selected.text() // the selected link text
$selected.attr('href') // the href value of the link

Menu Methods

Once you initialize a Ergo Menu, you can reference the variable you assigned to it and call the following exposed methods to control the menu from anywhere on the page:

  • instance.expand(): Expands the menu on demand. Pass in the event object when calling this method as an event handler, such as <a href="#" onClick="dropmenu1.expand(event)">
  • instance.contract(): Expands the menu on demand. Pass in the event object when calling this method as an event handler, such as <a href="#" onClick="dropmenu1.contract(event)">
  • instance.selectit(menuitem): Selects a particular menu item within the drop down menu, by highlighting it (add class of "selected" to menu item), plus update the menu title text. There are two ways to select a menu item:
    • Enter a number representing the order of the menu item within the UL, such as: instance.select(2)
    • Enter a jQuery object that selects the the menu item you wish to select. Lets say you've given that menu item an ID to easily pick it out. You can then call instance.select(jQuery('#menuitem2')) to select it.
  • instance.unselect(): Unselects the menu by resetting the menu title text to the default.

And that's a wrap!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post