Drupal, JQuery: Dropdown Menus

I needed to add Dropdown menus to a site that a designed using Drupal. I found a few modules (Nice Menus, etc) that would enable me to easily add dropdown menus to my site, but I wanted to use the CSS Drop-Down Menu Framework that I discussed in a previous post. With a little help from JQuery, I was able to add dropdown menus to my site without having to use a Drupal module.

I started with an article that I read, “Suckerfish CSS Drop Down Menus in Drupal Made Simple“. It listed all of the steps that I needed to create dropdown menus in Drupal using JQuery.

Altering the Theme

First I had to alter my theme, namely the page.tpl.php file. Originally, my primary links were printed like this:

<div id="header" class="span-24">
   	 <?php if (isset($primary_links)) : ?>
               <?php print print theme('links', $primary_links, array('class' => 'dropdown dropdown-horizontal')) ?>
        <?php endif; ?>
</div>

I’ve added the dropdown and dropdown-horizontal classes to all of my primary menu items. These classes are required for the type of menus that I want to use (see CSS Drop-Down Menu Framework).

So I changed the code to:

<div id="header" class="span-24">
     	 <div id="block-menu-primary-links">
     	      <?php print $header; ?>
        </div>
</div>

I want the primary links to be displayed in the header region of my template. I created a container (block-menu-primary-links) to hold the menus.

The CSS

I styled the menu in my theme’s CSS file.

ul.dropdown {
        font-weight: normal;
        float:right;
        margin-top:11px;
}
 
ul.dropdown li {
 	padding: 7px 15px;
 	color: #1AB7EA;
}
 
ul.dropdown li.hover,
ul.dropdown li:hover {
        color: #1AB7EA;
}
 
ul.dropdown a:link,
ul.dropdown a:visited { 
        color: #1AB7EA; text-decoration: none; 
}
 
ul.dropdown a:hover { 
        color: #fff; 
}
ul.dropdown a:active	 { 
        color: #fff; 
}
 
ul.dropdown ul {
        width: 170px;
        margin-top: 0px;
        margin-left:14px;
        border: solid thin #ED2B21;
}
 
ul.dropdown ul li {
	font-weight: normal;
	background-color:#1E4366;
}

Drupal Menus

I then added the submenus (Administer/Site Building/Menus/Primary Links). I added all of the submenus that I wanted and I then placed a check next to the expanded column (for the parent as well as the children).

Drupal Menus

JQuery

Now it’s time to add the JQuery code. I created a file named scripts.js and placed it under my theme folder (js/scripts.js). If you do not already have a scripts file for your theme, then you will have to add a scripts directive to your themes .info file.

scripts[] = js/scripts.js
?View Code JAVASCRIPT
$(document).ready(function(){
	$('#block-menu-primary-links ul:first').addClass('dropdown dropdown-horizontal');
        $('#block-menu-primary-links li').hover(
                function(){
                       $('ul:first', $(this)).show();
                },
                function(){
                      $('ul', $(this)).hide();
               }
        );
});

First I am adding the dropdown and dropdown-horizontal classes to the first ul within the #block-menu-primary-links div. I’m using JQuery’s :first method because I only want the first ul to be affected. To build dropdown menus, you will typically have multiple ul levels.

<ul>
        <li>Home</li>
        <li>About</li>
        <li>Services
                <ul>
	                <li>Services 1</li>
	                <li>Services 2</li>
	                <li>Services 3</li>
               </ul>
        </li>
        <li>Contact Us</li>
</ul>

So now my structure should look like this:

<div id="block-menu-primary-links">
<ul class="dropdown dropdown-horizontal">
        <li>Home</li>
        <li>About</li>
        <li>Services
                <ul>
	                <li>Structured Cabling</li>
	                <li>Outside Plant</li>
	                <li>Communication</li>
                        ...
               </ul>
        </li>
        <li>Contact Us</li>
</ul>
</div>

Next I use JQuery’s :hover method. When a user moves their mouse over one of the list items, the :first ul object will be displayed. Why only the first? Because you may have multiple levels and you only want the first level under the hovered list item to appear.

<li>Services
        <ul><!-- first level -->
                <li>Structured Cabling</li>
                <li>Outside Plant
                          <ul> <!-- second level -->
                                   <li>Item 1</li>
                                   <li>Item 2</li>
                          </ul>
               </li>
                <li>Communication</li>
                 ...
        </ul>
</li>

Animation

I can also use JQuery’s show method to animate the display of the dropdown menus.

?View Code JAVASCRIPT
$('#block-menu-primary-links li').hover(
          function(){
                 $('ul:first', $(this)).show('slow');
          },
          function(){
                 $('ul', $(this)).hide('slow');
          }
);

Easy enough. Now many of the steps post are similar to those displayed in the Suckerfish CSS Drop Down Menus in Drupal Made Simple article. The main difference is that I am using the CSS Drop-Down Menu Framework Because this framework has multiple configurations (vertical, Flickr-like, etc), you can use it and JQuery to create quite a variety of Drupal dropdown menus. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks