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?