Theming Drupal Menus
Upcoming SlideShare
Loading in...5

Theming Drupal Menus






Total Views
Views on SlideShare
Embed Views



5 Embeds 110 103 3 2 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Theming Drupal Menus Theming Drupal Menus Presentation Transcript

  • 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
  • Introduction / Background
    Trent Wyman
    DrupalTheming Specialist, Drupal Developer
    Began experimenting with Drupal in version 4.7.
    Employed full-time as a Drupal Developer & Theming Specialist since version 5.
    About Mediacurrent
    Web development firm located in Alpharetta, GA.
    focused solely on Drupal development and Drupalcustomization
  • 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
  • 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
  • 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
  • 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
    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
  • 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
  • Creating custom Drupal menus
  • Drupal Menu Contrib Modules (to enhance your menu theming and functionality)
    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.
  • Example of Nice Menus contrib module
  • Drupal Menu Contrib Modules (to enhance your menu theming and functionality)
    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 (
    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).
  • Example of Jquery Menu module
  • 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
  • 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
  • Example of Suckerfish CSS applied to a Drupal menu
  • Questions?