Add drop down menu support to Bartik

The Bartik theme doesn't support drop down menus as standard and there are various ways of addressing this, mostly using modules such as superfish.

Here's a way of adding them to a Bartik sub-theme, using a couple of theme function overrides and some CSS.

We will:

• Add the built in main menu block in the header region
• Remove Bartik’s main menu implementation
• Apply some CSS to turn the menu into a drop down menu

No additional modules required! (I've also documented this with pictures on my personal site.)

Add main menu block to header region

We will start by adding the main menu block to the header region. Go to admin/structure/block and add the Main menu block to the header region. Add some children to some of the menu items and make sure the parent item is expanded.

When we refresh the page we should see another menu, albeit expanded, in the header.

Remove existing menu

First create a sub-theme of Bartik. In this example I've called our sub-theme Bartik Drop Down (machine name bartikdropdown).

We can see that in page.tpl.php of Bartik (bartik/templates/page.tpl.php) there’s a line

<?php print theme('links__system_main_menu', ...

which renders a list of links. Currently this invokes the core function theme_links (includes/theme.inc) but we’ll define our own theme hook which returns null:

function bartikdropdown_links__system_main_menu() {return null;}

Add this to template.php of the sub-theme. Refresh the page (clearing the caches if necessary) and the Bartik menu should disappear.

Restyle the new menu

Looking at Bartik’s page.tpl.php, the menu is an unordered list element with id main-menu-links so we’ll try adding the same id to the our new menu and hopefully it’ll take on the Bartik style!

We can do this by adding

function bartikdropdown_menu_tree__main_menu($variables) {
  return '<ul id="main-menu-links" class="menu clearfix">'.$variables['tree'].'</ul>';
}

to template.php in our sub-theme. This overrides theme_menu_tree, adding the main-menu-links id.
If we check the page again we'll see that it isn't quite right and it requires some CSS to deal with the block-related styling around the menu:

.region-header {clear: both; float: none; margin: 0;} /* move menu back into block flow */
.region-header .block-menu {font-size: 1em; width: auto; margin: 0; border: 0;} /* move menu back into block flow. The 1em is to reset the region-header block 0.857em */ 
.region-header .block-menu li a {border-bottom: 0;}

The menu should now look pretty much like the original Bartik menu, except the drop down elements are visible and not in the correct positions.

We now need to add some styling for the drop down menu:

/* dropdown stuff */
#main-menu-links a {
  float: none;
}
#main-menu-links ul {
  padding: 0;
  position: absolute;
  left: -1000px;
}
#main-menu-links li:hover ul {
  left: auto;
  z-index: 1000;
}
#main-menu-links ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#main-menu-links ul li:hover a {
  background: rgba(240, 240, 240, 1);
}

#main-menu-links ul a {
  background: #ccc;
  background: rgba(200, 200, 200, 0.7);
  width: 150px;
  -khtml-border-radius-topleft: 0px;
  -khtml-border-radius-topright: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

/* active link */
#main-menu-links li.active-trail a {
  background: #ccc;
  background: rgba(200, 200, 200, 0.7);
}
#main-menu-links li.active-trail>a {
  background: #ffffff;
}

Check the page again (clearing caches if necessary) and you should have working drop down menus!