Quick & Easy Contextual Header Image in Drupal

Sheena Donnelly | 04-28-09

A contextual background image is one of the few things that seem much simpler to accomplish on a static HTML website than on an ever-changing, dynamic, CMS-based website. On some websites, a contextual header image or background color can be a more aesthetically pleasing addition or alternative to a breadcrumb trail, which is used to remind the user of the current page’s position in the Menu Tree.

With a dynamic CMS, if users are able to come in and change page titles and move items around in the menu system, they are most likely able to mess up any simple convention by which you could establish a contextual background.

I’m going to show you a quick and easy way to add contextual aesthetics to a Drupal site using a few Modules you may already have installed on your site. There are a few things to keep in mind with this tutorial, though. Since it is “quick and easy” it is not thoroughly tested for very large sites with menu systems that could easily run out of control. This tutorial is more geared towards a smaller site that has most of it’s content arranged heirarchically within one Menu Tree with a somewhat static root-level of the Menu Tree (i.e., main navigation).

Modules you will need:

Menu Block http://drupal.org/project/menu_block

Modules that are helpful:

Menu Trails http://drupal.org/project/menutrails
Pathauto http://drupal.org/project/pathauto

I will only be going into detail about how to use the Menu Block module. The Menu Trails and Pathauto Modules will be helpful on sites with Blogs and other frequently-updated nodes that will not be entered into the Menu Tree.

The first step to creating this functinality is to set up a well-organized main menu tree for your site. I am using the “Primary Links” menu on my site. I have organized my nodes heirarchically and made sure each item is not Expanded so that I end up with a clean main menu that consists of “Home”, “About Us”, “Services”, etc. You can choose the placement of your main menu in your page.tpl.php document, or through the blocks admin page (/admin/build/block). I am placing my Primary Links into the Site Header.

Next, we will use the Menu Block module to create a sidebar sub-menu that will contain only the children nodes of the active main-menu item. Once you have enabled the Menu Block module:

Go to Site Building -> Blocks -> Add Menu Block (/build/block/add-menu-block) The important configurations are as follows:

Block Title: The block title will automatically be generated as the title of the active main menu item. You can override that default in the “Block title” textfeild.
Parent item: Menu - this is the menu that you have chosen to organize your nodes in.
Parent Item: Item - the menu tree level of the item that must be selected in order to display it’s children (usually will be “root”, but if you only want a sidebar menu for one section of your site, for example, only for “About Us”, then you would choose that menu item from this drop-down)

Starting level: This is the level in the tree’s heirarchy which you want to be displayed in this block. If you chose “primary” then the top level and lower will be available for display, depending on the context. In this situation, we are chosing to start from the 2nd Level.
Starting level: Starting level will be: we are chosing “children of active menu item” for this menu, so we are not redundantly displaying the main menu items.

Once you have created this block, move it into your left sidebar (it will be named “Primary links(active menu item)”). Now you should have a list of main menu items in your header, and a list of sub-menu items in your left sidebar, which change based on which main-menu item is active.

Now, we are going to move on to the fun part: using CSS to create a contextual header with help from Menu Blocks’ contextual classes.

First, create a new Menu block. be sure you enter “” into the Block title textfield. The Parent item should be your main menu tree (here it is Primary Links) and the item should be “root of primary links”.

The starting level will be 1st, because we will only be changing our background between the main sections of the site, in order to create continuity between related pages. For the same reason, we will limit “Maximum depth” to “1”so that we only show parent items, never children.

Save these options and you will have a new block named “Primary links (level 1)” and move it to the header region, or create a new region wherever you want your contextual image to appear. You will now have a redundant list of your top-level primary links on every page.

The source for the new menu will look something like this:

notice that each <li> has a unique class using that item’s link ID (ex. menu-mlid-1412). Also notice that the active main-menu item will retain the “active-trail” class while on any of it’s children pages.

It’s time to start styling. Our first step is to hide the inactive menu items.

    #top-content ul.menu li,
    #top-content ul.menu li a{
    margin: 0;
    padding: 0;
    display: none;}

Putting in the second rule for the <a> tag ensures that the actual text does not show up when we make the active menu items visible.

Our next step is to set up a consistent width, height and default background image for pages that are not in the Primary Links tree.

#top-content ul.menu li.active-trail{
    display: block;
    height: 205px;
    width: 920px;
    margin: 0 auto;
    background-image: (images/default.jpg);}

Using a default image like this ensures that if the client decides to add an additional main-menu item there will be a default to fall back on.

Last, we put in the background images for each menu item, using the unique <li> classes as selectors.

#top-content ul.menu li.menu-mlid-1399{
    /put "About Us" background here/
    background-image: url(images/about-us.png); }

     #top-content ul.menu li.menu-mlid-1402{
    /put "Your Services" background here/
    background-image: url(images/services.png);}

     #top-content ul.menu li.menu-mlid-1412{
    /put "In Depth" background here/
    background-image: url(images/in-depth.png);}

     #top-content ul.menu li.menu-mlid-1413{
     /put "Client Center" background here/
     background-image: url(images/client-center.png)}

Our final result is a very nice-looking header image for each main section of the site, that will automatically change within the context of the site’s menu tree.