Drupal breakfast - Quick JQuery dropdown menu best practise in 2 mins
Okay. Here is something quick for you lazy people out there who wanna to put together a dropdown menu in Drupal in, literally, 2 mins if you have everything ready to go. By the way, you are here because you have a multi-level menu to turn in to a dropdown menu.
You need:
- Drupal 6.x installed.
- A primary menu and all items setup.
Ready?
- Paste the code below to the end of your theme style sheet. Change '#block-menu-primary-links' to in which your menu is located. 'width: 125px' is the width of each menu item; 'height: 25px;' is the height of you menu item.
#block-menu-primary-links * { margin: 0; padding: 0; }
#block-menu-primary-links li ul,
#block-menu-primary-links li,
#block-menu-primary-links a { width: 125px; height: 25px; }
#block-menu-primary-links li { list-style: none; }
#block-menu-primary-links a { display: block; }
#block-menu-primary-links li { float: left; position: relative; }
#block-menu-primary-links li ul { top: 25px; left: 0px; position: absolute; }
#block-menu-primary-links li ul ul { margin: -25px 0 0 125px; }
#block-menu-primary-links li ul { display: none; }
- Create a file call "dropdownmenu.js" in your theme folder "/site/all/theme/YOUR-THEME-NAME/", paste the code below to the file. This snippet handles showing/hiding the sub-menu. If you don't like the basic show/hide effect, there are more options here http://api.jquery.com/category/effects/
$(document).ready(function(){
$('#block-menu-primary-links li').hover(
function(){
$('ul:first', $(this)).show('normal');
},
function(){
$('ul', $(this)).hide('normal');
}
);
});
- In your theme folder "/site/all/theme/YOUR-THEME-NAME/", open the ".info" file, "garland.info" for example. Append "scripts[] = dropdownmenu.js" to the end of the file. This keep the script that manages the animation in a separated file.
- Back to the Drupal theme admin section /administer/theme/config/YOU-THEME-NAME. Don't change anything just go to the bottom of the page and press Save Configuration. This lets Drupal register the Javascript file we just created to the theme.
Alright, you are done.
Comments
Post new comment