Ergo Drop Down Menu Control
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.
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:
Step 3: Add the below sample HTML markup to your page, which shows one UL Drop Down Menu control:
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 @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:
|
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 theevent
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 theevent
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.
- Enter a number representing the order of the menu item within the
UL, such as:
instance.unselect()
: Unselects the menu by resetting the menu title text to the default.
And that's a wrap!