Creating Simple Drop Menu for Joomla 1.5.20 with MooTools 1.2.

4
Friday, 30 July 2010 00:46

The recent Joomla update included a MooTools upgrade plugin to load version 1.2.4 of the
framework. On this tutorial we're going to build a simple drop down menu without using any
modules. We will use a menu class from
MooDropMenu
that can create an unlimited nested menu, built by the HTML tags ul and li.

Preparing the Moo!

Go to the plugin manager and enable the MooTools upgrade plugin.

Preparing the Module

After creating your menu with nested items, go to the module manager and set the Always
show sub-menu Items
to
Yes

Set the Menu Tag ID to nav. This will set the id of the parent ul to nav

The JavaScript
Save this to your-template/js/moodropmenu.js

1/3

Creating Simple Drop Menu for Joomla 1.5.20 with MooTools 1.2.4
Friday, 30 July 2010 00:46

{codecitation class="brush:jscript"}/*--- description: This provides a simple Drop Down menu

with infinit levels license: MIT-style authors: - Arian Stolwijk requires: - core/1.2.4: '*' provides:
[MooDropMenu,Element.MooDropMenu] ---*/ var MooDropMenu = new Class({
Implements: [Options, Events],
options: {
onOpen: function (el) {
// open the
menu
el.set('opacity', 1);
},
onClose: function (el) {
// close the menu
el.set('opacity', 0);
},
onInitialize: function (el) {
// set menu to hide
el.set('opacity', 0);
},
mouseoutDelay: 200
},
initialize: function (menu,
options, level) {
this.setOptions(options);
if ($type(level) == 'number') {
this.menu = document.id(menu); //attach menu to object
this.fireEvent('initialize', menu);
// hook up menu's parent with event to trigger menu
this.menu.pel.addEvents({
'mouseover': function () {
// Set the DropDownOpen status to true
this.menu.pel.mel.store('DropDownOpen', true);
// Fire the event to
open the menu
this.fireEvent('open', this.menu.pel.mel);
// Clear the
timer of the delay
$clear(this.timer);
}.bind(this),
'mouseout':
function () {
// Set the DropDownOpen status to false
this.menu.pel.mel.store('DropDownOpen', false);
// Build a delay before the
onClose event get fired
this.timer = (function () {
if
(!this.menu.pel.mel.retrieve('DropDownOpen')) {
this.fireEvent('close',
this.menu.pel.mel);
}
}).delay(this.options.mouseoutDelay, this);
}.bind(this)
});
}
else {
level = 0;
this.menu =
$(menu);
}
// grab all of the menus children - LI's in this case
// loop through
children
this.menu.getChildren('li').each(function (item, index) {
var list =
item.getFirst('ul'); // Should be an A tag
// if there is a sub menu UL
if ($type(list)
== 'element') {
item.mel = list; // pel = parent element
list.pel = item; // mel
= menu element
new MooDropMenu(list, options, level + 1); // hook up the subMenu
}
});
},
toElement: function () {
return this.menu
} }); /* So you
can do like this $('nav').MooDropMenu(); or even $('nav').MooDropMenu().setStyle('border',1); */
Element.implement({
MooDropMenu: function (options) {
new MooDropMenu(this,
options);
return this;
} }); {/codecitation} The CSS
Save this to your-template/css/menu.css
{codecitation class="brush:css"} #nav { margin: 0; padding: 0; list-style: none; } #nav li {
position: relative;
float: left; } #nav ul { position: absolute; top: 23px;
/* How far is the
submenu from the parent item */ margin: 0; padding: 0; list-style: none; width: 136px;
border: 1px solid #aaa; background: #f1f1f1; -webkit-box-shadow: 1px 1px 5px #aaa;
-moz-box-shadow: 1px 1px 5px #aaa; box-shadow: 1px 1px 5px #aaa; } #nav ul li { float:
none; padding: 0; text-align:left; } #nav ul li a { width: 123px; background: #f1f1f1;
padding: 3px 3px 3px 10px; display: block; font-weight: normal; } #nav ul li a:hover {
background: #cdcdcd; } #nav ul ul { left: 137px; top: 0; } #pillmenu a{ float:none !important; }
/* Fix a display error in rhuk_milkyway */ {/codecitation} Preparing the Template
After saving the CSS and the JavaScript files to the appropriate folders, insert the following

2/3

Creating Simple Drop Menu for Joomla 1.5.20 with MooTools 1.2.4
Friday, 30 July 2010 00:46

code in your index.php just before </head>

{codecitation class="brush:xml"} <script src="templates/<?php echo $this->template
?>/js/moodropmenu.js" type="text/javascript"></script> <link href="templates/<?php echo
$this->template ?>/css/menu.css" type="text/css" rel="stylesheet" /> {/codecitation}
Now before the end of </body> add this code:
{codecitation class="brush:jscript"} <script type="text/javascript"> <!-window.addEvent('domready',function(){
$('nav').MooDropMenu({
onOpen:
function(el){
el.fade('in');
},
onClose: function(el){
el.fade('out');
},
onInitialize: function(el){
el.fade('hide').set('tween',{duration:500});
}
});
}); // --> </script>{/codecitation}
If you don't like the duration you can change its value to what you like.

Final Look!

Congratulations! Now you have a working drop down menu with simple CSS and JavaScript.
Please note that you might have to tweak the CSS to suit your template! If you used it post a
link to your site in the comments and don't hesitate to ask for help if you're stuck!

Download the full code

3/3