Download - Theming Drupal Menus
Theming Drupal menus
This presentation will cover the basics of setting up navigation menus within Drupal
Recommend Drupal Contrib Modules to enhance your menu's functionality
Provide CSS tips for theming Drupal menus
Introduction / Background
Presenter– Trent Wyman
Occupation– Drupal Theming Specialist, Drupal Developer
Drupal Experience– Began experimenting with Drupal in version 4.7. – Employed full-time as a Drupal Developer & Theming Specialist since
version 5.
Company– Mediacurrent www.mediacurrent.com
About Mediacurrent– Web development firm located in Alpharetta, GA. – focused solely on Drupal development and Drupal customization
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)
Drupal Menu Links– Drupal's menu system requires no direct coding or file
management to add or edit navigation to your site– Drupal menus can be setup and managed without any
knowledge of HTML, PHP, or other coding language
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 Drupal menus
Examples when a static menu may be required
The design uses non-websafe fonts 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
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
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 Drupal contrib module to add more flexibility to your menus
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.)
Drupal Menu System (out of the box)
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
Creating custom Drupal menus
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 Superfish jQuery plugin for all browsers,
with an option to disable JS, and falls back to CSS-only for browsers that can handle it.
Example of Nice Menus contrib module
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.
Example of DHTML Menu module
Drupal Menu Contrib Modules (to enhance your menu theming and functionality)
JQuery Menu (http://drupal.org/project/jquerymenu)– Jquery menu 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).
Example of Jquery Menu module
Techniques for Theming Drupal 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/
Assigning Drupal Menus to a Page Region
Script that programmatically displays the Primary Links menu
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
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
Example of Suckerfish CSS applied to a static menu http://www.carlos.emory.edu
Example of Suckerfish CSS applied to a Drupal menu http://localracing.nascar.com
Questions?