Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations

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:

1 Sriram DRUPAL GCI - 2010

2 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.

3 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.

4 List of popular websites using drop down menus.

5 What are nice menus? It is a module created by the drupal community which enables drop-down/right/left expandable menus. How does it work? 1. It uses only CSS for most browsers, with minimal Javascript for IE6. (Version 2 uses the Superfish jQuery plugin for all browsers, with an option to disable JS, and falls back to CSS-only for browsers that can handle it.) They require CSS to get customised styling. 2. Nice Menus creates blocks that may be associated with any existing site menu and can be placed wherever normal blocks can be placed in a theme What are the features found in nice menus? The ability to add and customise nice menus functionality to unlimited menus using the included theme functions. Three styles/types of menus are currently possible: horizontal where the menus drop down; vertical where the menus fly to the left; vertical where menus fly to the right. The ability to configure the no. of nice menu blocks.(till 10 blocks) It is also possible to theme a menu as a Nice Menu directly by using the provided theme functions

6 What are superfish menus? Superfish is one of the drupal’s modules which intergrates jQuery Superfish plugin with Drupal menus. It is an enhanced menu with the jQuery plugin that takes an existing pure CSS drop-down menu and adds many features without javascript. How does it work? Superfish can be used to combine with a menu module to easily create and manipulate drop down menus. It comes with several configurations such as shadows, arrows, vertical menu, horizontal menu, navbar menu, iframe for IE6 use, fade in, slide in, fade and slide in, opacity, intelligent mouseover handling, and more. Multiple level Superfish CSS drop down menu.

7 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.

8 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).

Download ppt "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."

Similar presentations

Ads by Google