“Fancy” select menus in Drupal using jQuery

“Fancy” select menus in Drupal using jQuery

I recently had to implement fancy select menus while helping out on the redesign of All-X.ca for my good friend and designer, Alex Ventpap.
Alex is very focused on design (as designers are) so while I thought the style of select menus wasn’t so important he had other ideas.

In this quick tutorial I’m going to show you how to create “fancy” select menus in Drupal using the Jquery Dropdown module, a technique which is becoming more popular on the web.

Before we go any further I want to clarify when I mention “select menu” or “drop down menu”, I mean a select menu/element you find in a form such as on Views exposed filters or on webforms rather than navigational drop downs like the “Learn Drupal” menu item here on DrupalSN. Although as you’ll see the principle is quite similar.

An Example
Using All-X.ca as an example I’m going to show you how to change those dull looking select menus in a Views exposed filter form into fancy eye-catching ones thanks to the power of jQuery!

From this:
Dropdown Before

To this:
Dropdown After

How it works?
If you’ve ever tried to style a select element with CSS you’ll know it’s pretty rigid and only supports basic style changes.
So the basic principle of using jQuery is it takes the select menu element and it’s values and change it into a simple unordered list (ul) which allows for far greater styling with CSS.

This:

– Any – Branding Illustration Interactive Design X-perience Lab
plus a little jQuery becomes:

– Any –

There are a few jQuery plugins which offer this or similar functionality:

JavaScript image combobox
mcDropdown jQuery Plug-in
Dropdown Check List
And although these looked great I wanted something already integrated into Drupal so after a bit of searching around I found the Jquery Dropdown module which despite the confusing name (Jquery Select Menus might have been better) looked perfect for the job.

I also came across the Form Beautifier module which also offers some Jquery styled form manipulation but it looked a bit overkill for my needs so I went for Jquery Dropdown instead.

Setting up the Jquery Dropdown module
The Jquery Dropdown module actually contains two modules so first thing is to install and enable both modules in the standard way.

Jquery Dropdown Modules

The second module in the bundle, Jquery Dropdown Jump makes the select menus load the new page without needing to click a “submit” button.

I’ve assumed you’ve set up a View with an exposed form select menu in it that you can use as an example.

Module installed, we’re done right?!……….Wait a minute it hasn’t done anything, wow great module! Wait a second! Before you go uninstalling the module take another look at what the Jquery Dropdown project page says:
bq. The intent behind this module is to give developer’s a “configure-less” way to instantly transform any dropdown to a jquery dropdown by adding the class “jquery_dropdown.”

So we need to put our developer hats on briefly to get the module working.

Hooking up the Jquery Dropdown Module
The way the module works is it scans pages using Jquery for any select elements with the class “jquery_dropdown” and then converts them into unordered lists (ul) instead. So we need to find a way to attach the “jquery_dropdown” class (and “jquery_dropdown_jump” class for the Jquery Dropdown Jump module) to our select menus.

There are 2 ways to add the classes to our select menus (I recommend option 1):

Option 1) A drop more Jquery (Javascript)
Your best to get the Jquery Dropdown module working is to add a bit of Jquery code to your theme that will transcends through your HTML to find the select elements/tags and apply the “jquery_dropdown jquery_dropdown_jump” classes to them.

Attach a new Javascript file
To keep things clean we’ll attach a new external Javascript file to our theme rather than using inline Javascript.

Open up your themes .info (ie. garland.info) and add the following line:
scripts[] = theme.js after any stylesheets definitions.
This just tells Drupal we want to attach the file theme.js when our theme is loaded.

Now create a new Javascript file, call it theme.js and save it to your themes root folder (ie. sites/default/themes/THEMENAME/)
Navigate to Administer › Site configuration > Performance and refresh your data cache.
View the page source or use Firebug to check the new theme.js file is being loaded into the page.
The Javascript Code
Next open up the new theme.js file in your favourite HTML editor and add the following code:

/**

  • attach Jquery Dropdown functionality
    */
    Drupal.behaviors.themeAttachJQDropDown = function(context) {
    $(‘select’).each(function () {
    $(this).addClass(‘jquery_dropdown jquery_dropdown_jump’);
    });
    }
    What this does it looks for “each” select HTML element and then adds the “jquery_dropdown jquery_dropdown_jump” classes to them, simple.
    If you want to target just select menus with Views exposed filter forms change $(‘select’).each(function () { to $(‘.view-filters select’).each(function () {

Refresh your Views page again and you should see the select menu has changed into an unordered list.

Option 2) Drupal theme function override (PHP)
You could also add the Jquery Dropdown HTML classes to select menus using PHP to override Drupal’s theme_select function.

Add the following to your themes template.php file, change the YOURTHEMENAME to match the name of your theme ie. garland_select:

‘jquery_dropdown jquery_dropdown_jump’);
}
$size = $element[‘#size’] ? ‘ size=”‘. $element[‘#size’] .'”‘ : ”;
_form_set_class($element, array(‘form-select’));
$multiple = $element[‘#multiple’];
return theme(‘form_element’, $element, ”. form_select_options($element) .”);
}
?>
Refresh your data cache within Drupal by navigating to Administer › Site configuration > Performance and you’re done!

Both options work well but the Javascript option (number 1) offers a bit more flexibility.

Add a bit of CSS
Our new select menus still look quite dull and a bit of a mess:

Before the CSS

BUT the advantage we have now is it’s now a unordered list rather than a select menu which gives us more freedom to style it with CSS.

Let’s hide the labels & submit buttons:

.views-exposed-form label,
.jquery_dropdown_page .views-exposed-form .form-submit {
display: none;
}
Now fix the width & height of the list and list items as well as add a background image for the top list item so it looks more like a list:

.jquery_dropdown_container {
width: 175px;
z-index: 1;
position: relative;
}
div.jquery_dropdown_header {
background:url(../images/jquery_dropdown/jquery_dropdown-header.png) left top no-repeat;
border: 0;
font-size: 13px;
width: 165px;
padding-left: 10px;
font-weight:bold;
height:32px;
line-height:32px;
overflow:hidden;
text-indent:2px;
color: #9EC700;
}
ul.jquery_dropdown_list {
border: 0;
background: #050702;
left:0;
margin:0;
padding:0;
position:absolute;
top:32px;
width:175px;
z-index: 1000 !important;;
}

ul.jquery_dropdown_list li {
background: none;
border-bottom: 0;
list-style:none outside none;
margin:0;
padding: 0;
}
Finally let’s add some style to the links ( tags) and a hover state:

ul.jquery_dropdown_list li a,
ul.jquery_dropdown_list li a:link,
ul.jquery_dropdown_list li a:visited {
color: #648304;
display:block;
font-size: 13px;
text-decoration:none;
width: auto;
padding: 0 10px;
height: 26px;
line-height: 26px;
font-weight: normal;
}
ul.jquery_dropdown_list li a:hover {
background:url(../images/jquery_dropdown/jquery_dropdown-link-bg.png) left top repeat-x;
color: #EDE8CF;
}
NOTE: You will have to use your own background images this is just an example of how you could style it.

Dropdown After

And that’s it, thanks for reading! Comment below if you have any questions or problems.

Leave a Reply

Your email address will not be published. Required fields are marked *