Building Drop-Down Menus - J Query

Inevitably, there will be a client or boss who wants everything “one click away” in a site navigation structure. While this is not an altogether ignoble aspiration, placing links to every single section of a site on a single page could add significant clutter to apage. Enter the drop-down menu.


In desktop programs and operating systems, these menus are often activated by clicking a term, after which you see a variety of subterms and categories. On the Web, however,the paradigm seems to be that drop-down menus appear when the user hovers over atop-level link, as shown in


Figures (Drop-down menu ready for use) and

Drop-down menu ready for use

(Drop-down menu in action).

By using a combination of CSS :hover rules and positioning techniques, most of the heavy lifting can be done without much JavaScript at all. jQuery can simply offer minor enhancements for IE 6.
A mild warning for developers: take into account the accessibility implications of users who do not have the manual dexterity to use a mouse. It’s like the old adage: “If all you have is a hammer, everything looks like a nail.” Before resorting to drop-downs as an easy off-the-shelf solution, check that the information architecture of the project has been well thought through. Be sure that a drop-down paradigm is the best choice. For example, Microsoft Word, long known for its ridiculous levels of drop-downs and toggleable options (most of which the average user never touched), was redesigned in Office 2007 with a tabbed UI dubbed the “ribbon.” Suddenly, once obscure options are being used regularly, because of a better executed interface.

Drop-down—HTML code

Drop-down—jQuery code


In this example, jQuery is only employed if the browser is IE 6. You might be wondering,“Why is fadeIn being called with only a one-millisecond animation?” This fixes a bugin IE 6, which has trouble rendering vertical CSS borders. Visually, it is the same as .show() but without any border issues. Aside from that, everything else is pretty simple. When a list item with class="dropdown_trigger" is hovered over, the subsequent<ul>is shown. When the mouse leaves that area, the <ul>is hidden. That’s all there is to it! Note that we are conditionally including the jQuery library only for IE 6.
Chances are, if you are reading this book, you will want to use jQuery for more than just this one particular demo. In that case, move your inclusion of jQuery outside of the conditional comments.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics