Last updated January 15, 2008. Created on January 14, 2008.
Edited by nitrospectide. Log in to edit this page.

This tutorial will walk you through how to set up the Nice Menus module, in combination with a special CSS sheet I have created (and you will need to modify). Its purpose it to create cascading menus with a graphical 1st tier. (For a look at the non-drupal site I am using as the model for the menu we will create, see www.vineyardmissions.org. Again – this site is not using Drupal, and employs an oldschool DHTML menu system. My goal was to take this site which I had done a year ago, and functionally mimic the menu with Drupal and the Nice Menus module.)

First, big thanks to Add1sun, for her excellent work in bringing Nice Menus up to date for d5 (and soon d6!) – I was up the creek on this one before she was so kind as to agree to polish up that module :)

A Quick Overview

Here’s a quick run-down on what we will need to do to mimic the example menu:

  1. Install and configure the Nice Menus module
  2. Set up our menus to have some links on them that we can style
  3. Upload our graphics
  4. Configure a block for our spacer
  5. Adjust the CSS to our liking (this is the meaty bit)
  6. Upload our CSS file and tell Nice Menus where it is

Install Nice Menus

Download and install the Nice Menus module into your Drupal 5 install (d6 and Nice Menus may need some tweaking of my CSS file to work – I have not tested them yet since neither is finalized as of this writing) Upload the module via ftp, and activate it at Home › Administer › Site building › Modules in your Drupal site.

Configure Nice Menus

First, go to Home › Administer › Site Configuration › Nice Menus to decide how many cascading menus you would like. If, like in the example we are copying, the design has a series of links, and then a graphical ‘gap’ between links that is not linked and has no rollover (as between ‘Contact Us’ and ‘Alternate Language Resources’) then you will want two separate menus to handle the two parts (before and after the gap). For our example, choose ‘2’.

Create Your First Nice Menu

We will only be building the last few choices on the menu only so we can keep this simple. We’re doing the last few so that we can incorporate the ‘gap’ as part of the solution.

Start by going to Home › Administer › Site building › Menus and clicking ‘add menu’ at the top. Give it the name ‘flyout1’. Create another and call it ‘flyout2’. These correspond to our two menus we told Nice Menus to provide for us, with one being for the ‘Event Calendar’ and ‘Contact Us’ link and the other for the ‘Alternate Language Resources’. The space between them will be handled by a custom block with the appropriate graphic placed in it.

Now, on the Menu admin page, add items to the two new menus. For flyout1, let’s create the last two menu items before the gap (from our site that we are copying). So, create ‘Event Calendar’ and ‘Contact Us’. Link these to whatever you like, since it won’t matter for our purposes. Now create some sub items, and feel free to name and link the sub-items however you like. Be sure to pop a few sub-sub items on so you can actually get things that fly out a couple of levels. To make a link a sub-item of something else, use the ‘Parent Item’ pulldown on the ‘Add Menu Item’ screen (the one you get when you create a new item) or the ‘Edit Menu Item’ screen, and select one of your previously created items as the parent.

On ‘flyout2’ add ‘Alternate Language Resources’, with sub-choices of Spanish and French.

Upload the Menu Graphics

Open up the zip file attached to this tutorial, and unzip to a folder on your desktop. Fire up your FTP program, and navigate to sites/all/themes in your Drupal installation folder. Create a fresh folder called ‘mytheme’ and inside that, create another folder called ‘images’. Upload the graphics from the zip file up to the images folder.

Configure the Spacer Block

Go to Home › Administer › Site building › Blocks and click the ‘add block’ tab at the top. For a description, put ‘nav spacer’ and in the block body, put the following code to call your spacer graphic:

<img src="/sites/all/themes/mytheme/images/nav-gap.gif">

Save the block, and then let’s set up your menus in the left column. Go down to the ‘disabled’ section on the block admin page, and find ‘Nice Menu 1’, ‘Nice Menu 2’ and ‘nav spacer’. Use the pulldown next to each to put them all in the left column and then after submitting the page to move them, use the weights so they go in the following order: Nice Menu 1, nav spacer, Nice Menu 2. Now click the ‘configure’ link next to Nice Menu 1, and set ‘Source Menu Tree’ to flyout1. Make sure that Menu Style is set to ‘right’ (left-hand nav that pops flyouts to the RIGHT). Now save the block, and do the same for Nice Menus 2, setting it to use flyout2.

Adjust Your CSS to Fit

Now open the CSS file in your preferred editor, and let’s take a look at what’s in there. If you know CSS pretty well, this will give you overview on what this file is doing. If you’re no CSS expert, just follow along and make the changes. You’ll find that the file is created in a way that will make customization pretty easy.

This file is a remix of the nice_menus_default.css file that comes with the Nice Menus module. The default file is provided as a starting point for creating overrides. The tutorial CSS file (my_menu.css) has reworked things so that the code is reorganized around what we are specifically doing – making a graphical menu with flyouts. The file is heavily commented to help you figure out what is going on. I will be hitting the highlights here.

The first section in the CSS sets the width of the menu items. The main level menu items are set to 200 pixels to accommodate the graphics we’re using. The sub items (flyouts) are set to all be 125 pixels.

In the next main section (‘global settings for all menu items’), the styles are set for the flyouts.

In the next section, we are getting to the heart of the matter, where we are applying the images to our top-level nav items. You will need to do a ‘view source’ on your drupal site where the menus are all set up in order to see what numbers your Drupal install has given to the menu items. Our sample CSS has the first style mapped to a menu item numbered 103 like so:

ul.nice-menu li#menu-103

Look at your page source and see what the number is on Event Calendar. Put this number in place of the 103 in the CSS at the following block:

ul.nice-menu li#menu-103,
ul.nice-menu li#menu-103 a:link,
ul.nice-menu li#menu-103 a:visited {
  background-image: url(images/nav-calendar_off.gif);
  background-position: 0px 0px;
  padding: 0px;
  height: 23px;
  width: 200px;
  text-indent: -5000px;
}

Now change ‘103’ to your number in the next block of code a little further down that looks like this:

ul.nice-menu li#menu-103 a:hover,
ul.nice-menu li#menu-103 a:active {
  background-image: url(images/nav-calendar_on.gif);
}

Finally, swap the numbers in the last block that looks like this:

ul.nice-menu li#menu-103 ul li a:link,
ul.nice-menu li#menu-103 ul li a:visited,
ul.nice-menu li#menu-103 ul li a:hover,
ul.nice-menu li#menu-103 ul li a:active,

ul.nice-menu li#menu-105 ul li a:link,
ul.nice-menu li#menu-105 ul li a:visited,
ul.nice-menu li#menu-105 ul li a:hover,
ul.nice-menu li#menu-105 ul li a:active,

ul.nice-menu li#menu-108 ul li a:link,
ul.nice-menu li#menu-108 ul li a:visited,
ul.nice-menu li#menu-108 ul li a:hover,
ul.nice-menu li#menu-108 ul li a:active {
  background-image: none;
  padding: 3px 0px 3px 0px;
  width: 125px;
  height: auto;
  text-indent: 4px;
  display: block;
}

Just change the 103. Leave the 105 and 108 as-is for a now.

So, what did we just do? The first section of code sets the appearance of Event Calendar for the ‘off state’ of the rollover (Link and Visited), while the second section changes the appearance for the ‘on state’ (Hover and Active). The last section tells all child items of this top level link to look like plain old flyouts, and not graphical (otherwise the graphic would be applied to all sub-items).

Another key item to understand is the line that reads

text-indent: -5000px;

This moves the text link out of the way by placing it waaaay off screen, so that all we see is the graphic link. By just moving the link off screen, instead of otherwise getting rid of it, we still have it around for SEO and screen readers.

Now, go and set the blocks with ‘105’ to the proper number for your Contact Us link. Finally, do the same with the block that uses number 108 – changing them to the number associated with your Alternate Language Resources link. In the future, you would just dupe new blocks if you add more top level links.

Scroll down now, and do the number replacements on the next series of code sections that set the Hover and Active states.

Finally, scroll to the last section, and make the number changes there as well. Be mindful of the fact that if you add new items, this last section of code is actually only one CSS declaration with three different groups of selectors. To add another item, just put a comma after the last item (ul.nice-menu li#menu-108 ul li a:active), and then copy down a new block of selectors below it.

These last few items are needed to make flyout1, flyout2 and the spacer block all snug up together seamlessly and look like a single menu.

To tweak the code that makes the spacer block work properly. Find the ID in your page source that looks like this:

#block-nice_menus-1

And make sure the selectors in the CSS file match. They should, since you have set up two Nice Menus (at the configuration step) and Drupal should have numbered them 1 and 2. If you use more menus in the future, this is where you would add them in. These declarations strip off excess padding and margins on out menus so they sit on top of each other without a gap.

The next block tells the block titles not to display.

The next large declaration removes all padding from the spacer block. Make sure the ID (#block-block-1) matches the ID on the spacer block in your page source. The extra lines that start with #header-region are for when you use menus that are positioned in the header region. This ID is unique to Garland, and will likely need to be changed to match the ID for the header region in another theme.

The very last CSS declaration tells the spacer block to display inline and float left if it’s in the header region.

Upload the CSS and Tell Nice Menus Where it is

Now that you have customized the CSS to fit your site, upload it to the sites/all/themes/mytheme folder (NOT into the images folder inside it). Next, go to Home › Administer › Site building › Themes and select Garland.

Now click the ‘configure’ link and make sure you are on the ‘global’ sub-tab. Put in ‘sites/all/themes/mytheme/my_menu.css’ as the path to the CSS file.

Submit the form, and check out your new menus.

AttachmentSize
graphicalFlyoutMenu.zip13.09 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

czoper’s picture

Please be aware that for Drupal 6 in my_menu.css file all instaces of
#menu
have to be changed to
.menu
as drupal 6 no longer use id's for menus, but sets classes for them.

for example we have to change

ul.nice-menu li#menu-103,
ul.nice-menu li#menu-103 a:link,
ul.nice-menu li#menu-103 a:visited {...

to

ul.nice-menu li.menu-103,
ul.nice-menu li.menu-103 a:link,
ul.nice-menu li.menu-103 a:visited {...

Good luck!