Presentation on theme: "Sriram DRUPAL GCI - 2010. What is a drop down menu? A drop down menu is a menu of options that appears when an item is selected with a mouse. The item."— Presentation transcript:
Sriram DRUPAL GCI - 2010
What is a drop down menu? A drop down menu is a menu of options that appears when an item is selected with a mouse. The item you select is generally at the top of the display screen, and the menu appears just below it, as if you had pulled it down. It is also know as the pull down menu. What are the advantages of websites using a drop down menu? Drop down menus are useful because they reveal the contents of a site simply by “mousing over” the main menu navigation bar. When the mouse moves over the navigation bar, the menu of pages "beneath” main sections appear dynamically. As the mouse moves down this list, third tier pages are also revealed. The visitor can click on any of these links and go straight to these pages. Drop down menus make navigating a site extremely simple. They also remove the need for site maps, since the navigation system itself acts as a dynamic site map. What are the disadvantages of drop down menus? Drop-down menus clearly have their place in effective Web design. However, the limited interaction with widgets available to designers has led to overuse and misuse of drop-down menus, creating usability problems and confusion. In the DHTML drop down menu, there is a bug between DHTML layers, Flash movies and HTML form widgets. If your menu system overlaps an embedded Flash movie, or a form widget (like a pull down menu or submit button) the flash movie or widget will display above the menu. Furthermore, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance.
How can a simple drop down menu be created using HTML? It can be created using simple html. The group of menu items is created by using the element and is then placed within a containing select element. The start tag contains the control name for the menu item group. Each menu item in the group has a different associated value specified by the value attribute. When a user selects a menu item, its value gets assigned as the current value of the menu item group's control name. Subsections can be created by the and then assigning various items under element. This permits the user to select multiple options using the ctrl button on his keyboard.
List of popular websites using drop down menus. http://www.google.com/ http://www.facebook.com/ http://www.yahoo.com/ http://www.youtube.com/
What are the extra features that the superfish menu provides? Timed mouse out delay. Sub-menu animated reveals. Keyboard accessibility (tab key). Obligatory IE6 hover capability. Automatic use of hover intent plug- in if available. Automatic generation of arrows to indicate submenus. Here is a comparison of a nice menu and a superfish menu done by one of drupal ’ s users.
What are mega menus? A mega menu typically consists of a single drop-down that appears on hover and shows all the options in one large panel. It also shows group options into related categories and uses icons or other graphics to help the user. The drupal module is used to create a certain style of "mega-dropdown" menu in Drupal leveraging jQuery, and the existing Drupal menu system. How does it work? Megamenu takes 3 levels of depth of a Drupal menu, and converts it into a categorized 3-level mega- dropdown-style menu. What are the features of mega menus? Single drop down appears down the hover. Shows all options in one large panel. Uses icons and illustrations to help and captivate the user. Division of various categories in a single panel. Most of all limited to zero scrolling required. Helps the web designer to express their artistic creativity. What are the advantages of a mega menu? For bigger sites with many features, regular drop-down menus typically hide most of the user's options. Scrolling down for items in the regular drop down menus hides the initial options. Hence, a person can't visually compare all your choices and has to rely on short-term memory. Mega drop-downs show everything at a glance, so users can see rather than try to remember. Illustrations can indeed be worth a mouthful of words. Mega drop-downs make it easy to use icons and pictures when appropriate. Even if you use text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).