Theming Drupal Menus

24,693 views

Published on

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,693
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
112
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Theming Drupal Menus

  1. 1. ThemingDrupal menus<br />This presentation will cover the basics of setting up navigation menus within Drupal<br />Recommend DrupalContrib Modules to enhance your menu&apos;s functionality<br />Provide CSS tips for themingDrupal menus<br />
  2. 2. Introduction / Background<br />Presenter<br />Trent Wyman<br />Occupation<br />DrupalTheming Specialist, Drupal Developer<br />DrupalExperience<br />Began experimenting with Drupal in version 4.7. <br />Employed full-time as a Drupal Developer & Theming Specialist since version 5.<br />Company<br />Mediacurrentwww.mediacurrent.com<br />About Mediacurrent<br />Web development firm located in Alpharetta, GA. <br />focused solely on Drupal development and Drupalcustomization<br />
  3. 3. Static Links v/s Drupal Menu Links<br />Static Navigation Files (hard-coded menu links)<br />sometimes written as HTML within a page file (pre Web 2.0)<br />commonly used as include files to display globally or as needed (common method today)<br />DrupalMenu Links<br />Drupal&apos;smenu system requires no direct coding or file management to add or edit navigation to your site<br />Drupalmenus can be setup and managed without any knowledge of HTML, PHP, or other coding language<br />
  4. 4. When to Use a Static Navigation File v/s When to Use Drupal&apos;s Menu System<br />There is rarely a need to use static menu files in Drupal (due to its flexibility & ease-of-use)<br />A static menu may be necessary when a site has graphic design requirements that are not possible using Drupalmenus<br />
  5. 5. Examples when a static menu may be required<br />The design uses non-websafefonts that have to be converted into images to use as buttons instead of standard text links<br />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<br />Applying custom background images and hover effects to menu items<br />
  6. 6. Most often (if not always) you should create your site navigation using Drupal&apos;s menu system<br />Easier to update and manage v/s static file<br />Drupal’s menu output is Web Standards compliant<br />Static menu files often contain validation errors that result from excessive editing from multiple programmers over a period of time<br />Drupal menus are typically more accessible than static menus<br />Links can be recognized and read by screen reader applications for those with visual disabilities<br />Links are available via keyboard input and do not rely solely on mouse interaction. This makes navigation accessible to those with physical disabilities<br />
  7. 7. Still feel limited to using a static menu file?There are alternatives to design limitations<br />If the design does require non-websafe fonts, consider using the Dynamic Rendering module http://drupal.org/project/render<br />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<br />
  8. 8. The Drupal Menu System (out of the box)<br />Primary Links Menu<br />typically, primary links are used to refer to a site&apos;s main navigation menu that appears globally on a site<br />Secondary Links Menu<br />generally used to refer to sub-menu items belonging to a primary navigation (sub-section links belonging to a parent menu item)<br />Drupal&apos;s Secondary Links Menu is separate from the Primary Links Menu (intended to be used as a lesser navigation)<br />Navigation Menu<br />Drupal’s administrative menu to navigate through administrative tasks (adding/editing content, configuring modules, etc.)<br />
  9. 9. Drupal Menu System (out of the box)<br />
  10. 10. Creating custom Drupal menus<br />The easiest way to create a custom primary menu in Drupal is to add your own links into the existing Primary Links Menu<br />To create a unique menu in Drupal you can click on the &quot;Add Menu&quot; tab located on the menu administration page www.yoursite.com/admin/build/menu/add<br />
  11. 11. Creating custom Drupal menus<br />
  12. 12. Drupal Menu Contrib Modules (to enhance your menu theming and functionality)<br />Nice Menus http://drupal.org/project/nice_menus<br />Enables drop-down/right/left expandable menus. <br />Uses only CSS for most browsers, with minimal Javascript for IE6.<br />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.<br />
  13. 13. Example of Nice Menus contrib module<br />
  14. 14. Drupal Menu Contrib Modules (to enhance your menu theming and functionality)<br />DHTML Menu http://drupal.org/project/dhtml_menu<br />Uses JavaScript to reduce the number of page loads when using nested menus<br />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.<br />After enabling DHTML Menu, clicking a menu link once will expand it to reveal its sub-items without reloading the page.<br />Double-click on the item will load the page normally.<br />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.<br />
  15. 15. Example of DHTML Menu module<br />
  16. 16. Drupal Menu Contrib Modules (to enhance your menu theming and functionality)<br />JQuery Menu (http://drupal.org/project/jquerymenu)<br />Jquerymenu uses simple, cross browser compatible jquery to make your multilevel menus collapsible and expandable.<br />Unlike DHTML Menu (which requires you to click twice on a link to actually follow an expanded link) <br />Jquery menu separates the link from the expanding mechanism (displays small plus symbol that you click instead to expand the menu).<br />
  17. 17. Example of Jquery Menu module<br />
  18. 18. Techniques for ThemingDrupal Menu Links<br />Assigning Drupal Menus to a Page Region<br />Using Drupal blocks to display your menu within a region<br />Script to programmatically display menu within a page template (.tpl file)<br />Basic CSS targeting to theme your menu links<br />Suckerfish CSS http://www.alistapart.com/articles/dropdowns/<br />
  19. 19. Assigning Drupal Menus to a Page Region<br />
  20. 20. Script that programmatically displays the Primary Links menu<br />
  21. 21. Basic CSS Targeting to theme menu links<br />If using Drupal&apos;s default Primary Menu, you can use basic CSS to target your links for theming<br />
  22. 22. Suckerfish CSS techniques<br />Enhances menu theming<br />Provides hover states (drop downs) to your menu to hide & show 2nd & 3rd level links<br />Suckerfish CSS is cross-browser compatible<br />Uses a lightweight JavaScript file to apply mouseover & mouseout events to links<br />
  23. 23. Example of Suckerfish CSS applied to a static menu http://www.carlos.emory.edu<br />
  24. 24. Example of Suckerfish CSS applied to a Drupal menu http://localracing.nascar.com<br />
  25. 25. Questions?<br />

×