Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Drupal, JQuery: Dropdown Menus

Thursday, March 18th, 2010

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:

^?View Code PHP

<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:

^?View Code PHP

<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.

^?View Code CSS

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.

^?View Code TEXT

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.

^?View Code HTML

<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:

^?View Code HTML

<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.

^?View Code HTML

<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.

Categories: Ajax, Drupal, JQuery
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

20 Responses to “Drupal, JQuery: Dropdown Menus”

handoyo Says:
March 22nd, 2010 at 12:11 pm

Hi,thanks for the tutorial..Is it possible to create dropline menus like this in drupal?

http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/

http://www.sugarcreek.net/

Thanks…
admin Says:
March 23rd, 2010 at 5:22 pm

Yes, this can be easily accomplished. Use CSS for the UI. JQuery is only needed from the display/hide functionality.
admin Says:
March 23rd, 2010 at 7:16 pm

I guess you wanted a bit more detail than that. Use the CSS from this CSS Menu Framework type:

http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html

And then apply the JQuery code that I displayed in my post. Let me know if you have any questions.
handoyo Says:
March 23rd, 2010 at 9:40 pm

Thanks a lot…I’ll try it first and i’ll tell you the result.. ^_^
handoyo Says:
March 24th, 2010 at 12:24 am

I can’t get it worked the way it should be..It gives me drop down instead of drop down linear…
handoyo Says:
March 24th, 2010 at 12:36 am

here are the codes

the css files :

/* buat suckerfish */
/* remove any previously set margins and paddings */
#block-menu-primary-links * { margin: 0; padding: 0; }

/* set width/height on , , */
#block-menu-primary-links li ul,
#block-menu-primary-links li,
#block-menu-primary-links a { width: 125px; height: 25px; }

/* remove list styling off */
#block-menu-primary-links li { list-style: none; }

/* display as block */
#block-menu-primary-links a {
display: block;
text-decoration:none;
}

#block-menu-primary-links a.hover {
display: block;
color:#ff33ee;
}

/* set position */
#block-menu-primary-links li {
float: left;
position: relative;
}

/* set position of in */
/* Ini cssnya sub menu */
#block-menu-primary-links li ul {
top: 25px;
left: 0px;
position: absolute;
}

/* position child */
#block-menu-primary-links li ul ul
{
margin: -25px 0 0 125px;
}

#block-menu-primary-links li ul { display: none; }

/* buat style dropline */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

ul.dropdown-linear {
width: 100%;
}

ul.dropdown-linear ul li {
float: left;
}

ul.dropdown-linear li.hover,
ul.dropdown-linear li:hover {
position: static;
}

ul.dropdown-linear ul ul {
display: none !important;
}

the php file :

the js file :

$(document).ready(function(){

$(’#block-menu-primary-links ul:first’).addClass(’dropdown dropdown-linear’);
$(’#block-menu-primary-links li’).hover(
function(){
$(’ul:first’, $(this)).show();
},
function(){
$(’ul’, $(this)).hide();
}
);

});

Sorry if i put the codes here as i can’t paste the link here…Thanks a lot….
handoyo Says:
March 24th, 2010 at 12:39 am

the php files :

[code]

[/code]
juliawan Says:
April 20th, 2010 at 1:14 am

I have something issues in my themes ,is cann’t show the drop down menu in my themes, where can I put the code to make drop down menu, and my page.tpl.php is in here sir : http://pastebin.org/160840 ,please really need your help sir
juliawan´s last blog ..SELAMAT TAHUN BARU 2010! =-.
admin Says:
April 20th, 2010 at 8:42 am

You have to change the primary links code. On line 136 of your code, you have:

<?php if ($primary_links): > <div id="primary"> <?php print theme('links', $primary_links); ?> </div> <?php endif; ?>

Change it to:

<div id="block-menu-primary-links"> <?php print $header; ?> </div>
juliawan Says:
April 20th, 2010 at 8:50 pm

sorry, what do u mean sir? I don’t understand what do u mean in my line 136

my line 136 :
#
#
#
#
#

and what do u mean to change it? in what place I want to change it??
juliawan´s last blog ..SELAMAT TAHUN BARU 2010! =-.
admin Says:
April 21st, 2010 at 8:52 am

Sorry, Wordpress mangled my code. I just fixed it.
juliawan Says:
April 21st, 2010 at 8:17 pm

mm nope I am using drupal sir, can u fixed it?
juliawan´s last blog ..SELAMAT TAHUN BARU 2010! =-.
dcolumbus Says:
May 9th, 2010 at 8:33 pm

So, I’d love to be able to incorporate CSS Drop-Down Menu Framework and do what you’re doing here, but I can’t get it to work at all… I’ve done the Suckerfish tutorial and that worked fine. But all of this stuff on your post did nothing. Once you’ve completed the Suckerfish tutorial, what’s the deal?
admin Says:
May 9th, 2010 at 9:03 pm

You should not have to read the Suckerfish tutorial as I have incorporated the relevant parts in my post. What problem are you having? Are you receiving an error? There are differences between my post and the Suckerfish tutorial so you should probably only read my post. I linked to the Suckerfish tutorial because I wanted to give the author the props for the initial idea. Let me know what problem you are having and I will try to help.
dcolumbus Says:
May 9th, 2010 at 9:09 pm

Well, I’m just about to release a new theme for Drupal that incorporates YUI and to top it off, I want a nice menu… I guess the main thing that I’m not getting at all is:

You’re printing the entire header? What’s going on in this step?
admin Says:
May 10th, 2010 at 10:10 pm

Your code did not display in the comments, so I’m not sure what you are referring to. Are you referring to this line?

<div id="block-menu-primary-links"> <?php print $header; ?> </div>
dcolumbus Says:
May 10th, 2010 at 10:13 pm

Heh… yeah… that’s the one. :S
admin Says:
May 10th, 2010 at 11:27 pm

Yeah, It only appears to work when you print the entire header as I did.

I originally created my theme using:

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

But I could not get menu to work (I also couldn’t get the Suckerfish code work without changing my theme).
Creatile Says:
May 13th, 2010 at 3:02 am

Hello
The menu works for me but when the page is loading, the menu is vertical for 2 seconds and come horizontal after loading the rest of the website.
How can I make it loading quickly
Creatile´s last blog ..Adding Custom Geo Tagging to Managing News =-.
admin Says:
May 13th, 2010 at 3:33 pm

I don’t know how to speed it up, but I guess you could try to hide the container until the header is loaded.