This presentation covers theming Drupal menus. It discusses setting up navigation menus in Drupal using the built-in menu system versus static menu files. It recommends Drupal modules like Nice Menus and DHTML Menu to enhance menu functionality. It also provides CSS tips for styling Drupal menus, including using Suckerfish CSS techniques for drop downs.

1. ThemingDrupal menus This presentation will cover the basics of setting up navigation menus within Drupal Recommend DrupalContrib Modules to enhance your menu's functionality Provide CSS tips for themingDrupal menus

2. Introduction / Background Presenter Trent Wyman Occupation DrupalTheming Specialist, Drupal Developer DrupalExperience Began experimenting with Drupal in version 4.7. Employed full-time as a Drupal Developer & Theming Specialist since version 5. Company Mediacurrentwww.mediacurrent.com About Mediacurrent Web development firm located in Alpharetta, GA. focused solely on Drupal development and Drupalcustomization

3. Static Links v/s Drupal Menu Links Static Navigation Files (hard-coded menu links) sometimes written as HTML within a page file (pre Web 2.0) commonly used as include files to display globally or as needed (common method today) DrupalMenu Links Drupal'smenu system requires no direct coding or file management to add or edit navigation to your site Drupalmenus can be setup and managed without any knowledge of HTML, PHP, or other coding language

4. When to Use a Static Navigation File v/s When to Use Drupal's Menu System There is rarely a need to use static menu files in Drupal (due to its flexibility & ease-of-use) A static menu may be necessary when a site has graphic design requirements that are not possible using Drupalmenus

5. Examples when a static menu may be required The design uses non-websafefonts that have to be converted into images to use as buttons instead of standard text links Perhaps you need to granular theme your links and the default Drupal menu does not provide style classes specific enough to target individual links v/s others Applying custom background images and hover effects to menu items

6. Most often (if not always) you should create your site navigation using Drupal's menu system Easier to update and manage v/s static file Drupal’s menu output is Web Standards compliant Static menu files often contain validation errors that result from excessive editing from multiple programmers over a period of time Drupal menus are typically more accessible than static menus Links can be recognized and read by screen reader applications for those with visual disabilities Links are available via keyboard input and do not rely solely on mouse interaction. This makes navigation accessible to those with physical disabilities

7. Still feel limited to using a static menu file?There are alternatives to design limitations If the design does require non-websafe fonts, consider using the Dynamic Rendering module http://drupal.org/project/render If you need to granular theme your links and require unique style classes for all nested menu items, consider using a Drupalcontrib module to add more flexibility to your menus

8. The Drupal Menu System (out of the box) Primary Links Menu typically, primary links are used to refer to a site's main navigation menu that appears globally on a site Secondary Links Menu generally used to refer to sub-menu items belonging to a primary navigation (sub-section links belonging to a parent menu item) Drupal's Secondary Links Menu is separate from the Primary Links Menu (intended to be used as a lesser navigation) Navigation Menu Drupal’s administrative menu to navigate through administrative tasks (adding/editing content, configuring modules, etc.)

9. Drupal Menu System (out of the box)

10. Creating custom Drupal menus The easiest way to create a custom primary menu in Drupal is to add your own links into the existing Primary Links Menu To create a unique menu in Drupal you can click on the "Add Menu" tab located on the menu administration page www.yoursite.com/admin/build/menu/add

11. Creating custom Drupal menus

12. Drupal Menu Contrib Modules (to enhance your menu theming and functionality) Nice Menus http://drupal.org/project/nice_menus Enables drop-down/right/left expandable menus. Uses only CSS for most browsers, with minimal Javascript for IE6. Version 2 uses the SuperfishjQueryplugin for all browsers, with an option to disable JS, and falls back to CSS-only for browsers that can handle it.

13. Example of Nice Menus contrib module

14. Drupal Menu Contrib Modules (to enhance your menu theming and functionality) DHTML Menu http://drupal.org/project/dhtml_menu Uses JavaScript to reduce the number of page loads when using nested menus When using default Drupal menus, to see the sub-items in a menu, you need to click the link of this item and wait for a full page load. After enabling DHTML Menu, clicking a menu link once will expand it to reveal its sub-items without reloading the page. Double-click on the item will load the page normally. Also sets a cookie to store which menus are open and which are closed, so that the state of the menus remain consistent as you navigate around the site.

15. Example of DHTML Menu module

16. Drupal Menu Contrib Modules (to enhance your menu theming and functionality) JQuery Menu (http://drupal.org/project/jquerymenu) Jquerymenu uses simple, cross browser compatible jquery to make your multilevel menus collapsible and expandable. Unlike DHTML Menu (which requires you to click twice on a link to actually follow an expanded link) Jquery menu separates the link from the expanding mechanism (displays small plus symbol that you click instead to expand the menu).

17. Example of Jquery Menu module

18. Techniques for ThemingDrupal Menu Links Assigning Drupal Menus to a Page Region Using Drupal blocks to display your menu within a region Script to programmatically display menu within a page template (.tpl file) Basic CSS targeting to theme your menu links Suckerfish CSS http://www.alistapart.com/articles/dropdowns/

19. Assigning Drupal Menus to a Page Region

20. Script that programmatically displays the Primary Links menu

21. Basic CSS Targeting to theme menu links If using Drupal's default Primary Menu, you can use basic CSS to target your links for theming

22. Suckerfish CSS techniques Enhances menu theming Provides hover states (drop downs) to your menu to hide & show 2nd & 3rd level links Suckerfish CSS is cross-browser compatible Uses a lightweight JavaScript file to apply mouseover & mouseout events to links

23. Example of Suckerfish CSS applied to a static menu http://www.carlos.emory.edu

24. Example of Suckerfish CSS applied to a Drupal menu http://localracing.nascar.com

25. Questions?