Skip directly to content

Drop down menus in Drupal Gardens: How to style every little pixel

on November 3rd, 2010 at 6:16:10 PM

In the latest release of Drupal Gardens we have introduced drop down menu styling into our base themes.

In order to take advantage of the latest drop down menu styling, please update your theme if you created it prior to November 4th.

The drop down styling is a combination of CSS and the Superfish plugin. The menus work without javascript enabled, but the javascript gives them a little touch of interactive forgiveness for the manic mousers among us :)

If you'd like a quick tutorial on how to enable sub menus in Drupal 7, check out this post.

The drop down styling currently only applies to menus in the navigation region of the themes. This region contains the main menu by default. Any of the Drupal 7 system menus or even a custom menu will present as a drop down if it is placed in the navigation region and has sub menu items.

Styling the menus

Drop down menus are like little widgets. They have a lot of moving parts and states. What do I mean by parts? Well, there are ul (unordered list) elements shown here in green boxes.

The ul elements contain li (list item) elements shown here in fuschia boxes. Notice how the li items contain the ul elements nested in them. I didn't outline every li in the structure to keep the lines a little easier to distinguish.

The li elements each contain a link wrapped in an a (anchor) elements shown below in orange boxes. Notice how the anchor elements do not contain any other elements.

What do I mean by states?  Well, we have:

  • Default
  • Active (the page we're on)
  • Active trail (a parent of an active page)
  • Hover (the mouse is over the item)
  • Active hover
  • Active trail hover

Those are the technical details. We'll see them pop up in the CSS selectors below. For a widget-like unit like a drop down, we want to make sure we style each state and apply those styles to the correct parts. In fact, that's good practice for any styling project.

Let's theme!

First, let's make sure you're looking at the default state of the Whitepapers menu link (i.e. that it isn't active). Navigate to the front page of your site.

Then open the Advanced tab in the Theme Builder.

Drop down menu top link

Our drop down menu top link is Whitepapers. Let's say that we wanted to change the background color and font color of the Whitepapers link because it has sub menu items.  We want to leave the background color and font color for non-sub menu links alone.

To make this style change, paste the following code into the text area of the Advanced tab and press the Update button.

 .menu-dropdown .menu .expanded > a {
  background-color: #0099ff;
  color: #ffffff
}
 
You should see the following change to the background color of the Whitepapers link.

Note the .menu-dropdown class in the code example above. This class scopes all of or changes to the children of the element classed with .menu-dropdown - in this case the block that contains the main menu.

In the example above, the .expanded selector picks out li elements that have sub menus and that are expanded (as opposed to collapsed).

Also in the example above, the greater-than character > is the CSS children selector. Normally a selector finds descendants. In this case, we don't want all of the a tags under .expanded, just the child anchor tag (the one just one level down in the HTML structure). The greater-than character keeps our background color property from cascading all the way down the sub menu tree.

Drop down menu top link hover

Now let's style the hover state of the Whitepapers link. To make this style change, paste the following code into the text area of the Advanced tab and press the Update button. 

 .menu-dropdown .menu .expanded:hover > a {
  background-color: #66b9ff;
} 

The result should look like the screenshot below when you hover over the Whitepapers link.

 

The code we added is shown in the fuschia arrow in the screenshot above.

I can hear the question hanging in the air: Why did I specify the hover on .expanded and not the a tag in the code snippet above?

An excellent question! I have two answers

  1. We want to maintain the hovered state of the link event when the mouse has moved down into a sub menu. When hovering over a sub menu, we are still technically hovering the parent li element (the one classed with .expanded), so the a tag maintains the hovered background color.
  2. Try moving the :hover from the .expanded class to the a tag and hover on the menu to see what I mean...then move it back :)

Drop down menu top link active

Now click on the Whitepapers links to take us to that page. When we are on the Whitepapers page, Drupal adds classes to the menu item to indicate that it is active.  Take note of the small triangle image to the right of the link text. This is the more indicator icon and it is orange (in my example). The color is not ideal. We'd like this icon to be white instead to match our font color.  Or perhaps a very light blue. The more indicators are styled with an image sprite that has images for pull down and pull right menus. Pull down indicates that the sub menu appears below the parent link and pull right indicates that the sub menu appears to the right of the parent link.

The more indicator image sprite contains has the default, hover and active states of both the pull down and pull right.  Below is the default sprite for the Minima theme with the various states indicated. I included a copy of the sprite over a blue background to the right of the original so that the white indicators are visible.

Below is the updated png file for our design. You can right-click and save this image if you would like to use it.

We will use the functionality under the Theme Builder's Styles tab to change the background image of the more indicator. Press the Update button under the Advanced tab text area and Save your work so far. Then switch to the Styles tab. The screenshot below shows the various places you will click in the interface. Follow the directions below the screenshot.

 

In the image above, follow these steps.

  1. Select the more indicator on the page by pointing the mouse at it and selecting it.
  2. Turn on Power theming.
  3. Turn on Show CSS.
  4. Adjust the element selector (the pucks with the blue outlines) so that it looks like the image.
    1. To get the .menu-dropdown in the puck as show, click the dropdown arrow and select this class from the list of classes on this element.
    2. Deselect all pucks but these two. We want to keep the selector as simple as possible.
  5. Click the Browse... button to select the new image.
    1. You can right-click my sprite image above and Save as... to get a template image to start from. Then simply adjust the colors in an image editing program.

Once the new image is uploaded, you'll see the preview change to look like the screenshot below. Ignore the fact that it is repeating in the preview.

Just a quick note about the construction of the more indicator sprite image. It is constructed in such a way that the different states can be show through simple background position statements.

Direction / State background-position
pull-right / default left top
pull-right / hover left center
pull-right / active left bottom
pull-down / default right top
pull-down / hover right center
pull-down / active right bottom

Let's also change the color of the link text in the active state. Navigate back to the Advanced tab and enter the following code.

  .menu-dropdown .menu .active-trail > a {
  color: #caeffc;
} 
  

The .active-trail class designates the li element.

Drop down menu top link active hover

For completeness, I will mention that when the Whitepapers items is active, we can style the active hover state differently than the non-active hover state. For this how-to, we'll leave the hover styling of the item the same for active and non-active states, but if you wanted to style the hover state of the active item, you could use this selector.

.menu-dropdown .menu .active-trail:hover > a {} 

Drop down sub menu link

Ok, the Whitepapers link is styled. Now let's focus our attention on the sub menu that appears when we hover on the menu item. You may have noticed that the styles we declared for the .expanded top level Whitepapers item have cascaded to the sub menu links that are also expanded. In the screenshot below, note the How to theme and Object oriented CSS item styles are different than the style of Increase your page speed, which does not have sub items.

Let's undo that styling of these sub menu items that also have sub menus (How to theme and Object oriented CSS in the screenshot above). In the Advanced tab, paste the following code.

 .menu-dropdown .menu .menu .expanded > a {
  background-color: transparent;
} 

Notice the .menu .menu in the selector above. This means "find menu classed items that are descendants of menu classed items." It's a useful way to select everything after the top link in the drop down menu. You page should look similar to the screenshot below.

 

The code we added is shown in the fuschia box in the screenshot above.

Drop down sub menu link hover

You will also notice that the background color of hovered sub menu items is no longer functioning. Let's put it back in and include non-expanded (items without sub menus) as well. Enter the following code into the Advanced tab.

 .menu-dropdown .menu .menu li:hover > a,
.menu-dropdown .menu .menu .expanded:hover > a {
  background-color: #66b9ff;
} 

Hover over your menu into a sub sub menu, similar to how I have hovered into How to theme onto Leveraging CSS 3 in your themes in the screenshot below.

The code we added is shown in the fuschia box in the screenshot above. Nice.

Drop down sub menu link active

Just as the Whitepapers items had an active state when we are on the Whitepapers page, our items in the sub menus will be classed as active when we navigate to one of these pages. Click on a sub menu item in your navigation. I'm going to click on my Object oriented CSS link.

The screenshot below illustrates what my sub menu item Object oriented CSS looks like when I am on that page.

You can see above that the active link has inherited the Whitepapers item active styles. The text color is light blue.

For the purpose of this tutorial, let's change the color of the active sub menu links to contrast with the top level active sub menu link. Note that the top menu link is in the active state because it is part of the active trail.  Let's make our sub menu active link a nice, dark blue color.  Enter the following code into the Advanced tab.

 .menu-dropdown .menu .menu a.active {
  color: #4f8ac0;
} 

You're page should look like this screenshot below.

 

The code we added is shown in the fuschia box in the screenshot above.

You could also change the pull-right active more indicator image to match the color of active sub menu links, like in the screenshot below.

My updated sprite is available below. Right-click and save the image to use it.  You will need to use the Styles tab again. Follow the steps above where we changed this image from the original.

 

Drop down sub menu link active hover

For the Whitepapers item, we did not style the active hover state. We will style this state for our sub menu items.

The dark blue color of an active item isn't quite dark enough to be legible with the current background hover color, so we'll bring the lightness of the hover color up a bit only for active links in the hover state. Enter the following code in the Advanced tab.

 .menu-dropdown .menu .menu li:hover > a.active {
  background-color: #e0eeff;
} 

The hover state of the active Object oriented CSS page item should look like the screenshot below.

The code we added is shown in the fuschia box in the screenshot above.

Drop down sub menu link active-trail

If you haven't created a second level sub menu, do so now for the purposes of this demo. Then navigate to that new page. I created Encapsulation as a concept in CSS under Object oriented CSS. When the page saves, you will be taken to the new page. Hover over the Whitepapers items and you should see something like the screenshot below.

Notice in the screenshot above that the colors of the Object oriented CSS item is no longer a dark blue that indicates an active link. It is now the parent of the active link in the hierarchy and therefore in the active-trail. In order to style active trail items with a dark blue text color, we need to add a selector to two existing style declarations. 

Find the following selector in the code you already entered in the Advanced tab:

 .menu-dropdown .menu .menu a.active {
  color: #4f8ac0;
} 

and change it to look like this:

 .menu-dropdown .menu .menu a.active,
.menu-dropdown .menu .menu .active-trail > a {
  color: #4f8ac0;
} 

Now, hover over the Whitepapers item and Object oriented CSS is shown in dark blue like in the screenshot below.

 

The code we added is indicated with the "added selector" label in the screenshot above.

Drop down sub menu link active-trail hover

The last consideration is hover on an active-trail item Object oriented CSS. You'll notice that your page looks something like the screenshot below when you hover over the Encapsulation as a concept in CSS menu item. The Object oriented CSS page is being hovered, but it doesn't have the dark blue text and light blue background that an active item should have.

Let's fix this. We just need to add an other selector to one of our styles.

 

Find the following selector in the code you already entered in the Advanced tab:

 .menu-dropdown .menu .menu li:hover > a.active {
  background-color: #e0eeff;
}  

and change it to look like this:

 .menu-dropdown .menu .menu li:hover > a.active,
.menu-dropdown .menu .menu .active-trail:hover > a {
  background-color: #e0eeff;
} 

Your page should look like the screenshot below when you hover over the Encapsulation as a concept in CSS menu item.

The code that we added is indicated by the "Added selector" label in the screenshot above. Excellent!

Drop Shadows  

And just for kicks, let's add drop shadows to the sub menus! Here's a little snippet of code to add to the Advanced tab:

 .menu-dropdown .menu .menu {
  -moz-box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5);
  box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5);
} 

and you should see something like this screenshot below.

The code we added is indicated by the fuschia box in the screenshot above. Wicked!

So that ends this little how-to.  Because the drop down menus are built with semantic unordered list and a little CSS, you can take the presentation of them in many directions. Use this how-to as a jumping off point for your experiments in the Theme Builder.

Post new comment