Drop-Down Menu

As part of a new UI library, I have built a multi-level drop-down (dropdown) menu feature using CSS and jQuery in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The drop-down menu supports the following features:

• Supports multiple levels (three deep - see the "Drop-Down Menu" menu item for an example).
• Control what type of user event expands the menu ("click" or "mouse").
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Future Proof
  • Simple Implementation

The Demo

        The menu above, in the header of this website, is the demo itself.
    

The Markup

Just some basic page elements (<nav>, <section>, <h1>, <ul>, <li>, <h2>, <h3>, and <a>), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Drop-Down Menu by simply setting the top-level wrapping element (e.g. <nav> or <div>) of the menu markup with the class attribute to "dropDownMenu", and setting the desired optional custom data attributes. The custom data attributes are optional, so the accordion could simple have only the standard markup plus the class attribute.

That sounds like a DRY solution to me (see UI Manifesto).

<nav class="dropDownMenu"
    data-userEventToTriggerOpen="click">
    <section>
        <h1>UI Library</h1>
        <ul>
            <li><a href="/ui/library/accordion/">Accordion</a></li>
            <li>Autocomplete</li>
            ...
            <li><a href="/ui/library/datetimetextbox/">DateTime Textbox</a></li>
            <li>E-mail Textbox</li>
            <li><a href="/ui/library/grid/">Grid (data table)</a></li>
            ...
            <li>
                <h2>Menu (Drop-Down)</h2>
                <ul>
                    <li><a href="/ui/library/dropdownmenu/">Get the Menu Code</a></li>
                    <li><a href="/ui/library/dropdownmenu/#1.1">Level Two Test #1</a></li>
                    <li>
                        <h3>Level Two Test #2</h3>
                        <ul>
                            <li><a href="/ui/library/dropdownmenu/">Get the Menu Code</a></li>
                            <li><a href="/ui/library/dropdownmenu/#2.1">Level Three Test #1</a></li>
                            <li><a href="/ui/library/dropdownmenu/#2.2">Level Three Test #2</a></li>
                        </ul>
                    </li>
                    <li><a href="/ui/library/dropdownmenu/#1.3">Level Two Test #3</a></li>
                </ul>
            </li>
            ...
        </ul>
    </section>
    <section>
        <h1>Website Solutions</h1>
        <ul>
            <li>Ajax Gets</li>
            <li>Ajax Posts</li>
            <li>Authentication System</li>
            ...
        </ul>
    </section>
</nav>

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)