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 in action).
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.
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.