PinoyTech.org

CodeIgniter, Kohana, Mootools, jQuery and CSS

A Simple Mootools Drop Down Menu

Posted by teejay on March 18, 2010

I'm really learning Javascript throught Mootools and as one of my efforts, I tried and succeeded in creating a Mootools Drop Down Menu. Like most Javascript dropdown scripts, it works by simply displaying and hiding unordered lists.

var DDown_Menu = new Class({
 Implements: [Events],
 initialize: function(menu, links){
  this.menu = $(menu);
  this.submenu = links;
  $$(this.submenu).each(function(item){
   item.setStyles({'display': 'none'});
  });
  this.attach();
 },
 attach: function() {
  this.menu.getChildren('li').addEvents({
    'mouseenter': function(e){
     e.target.getChildren('ul')
      .setStyle('display', 'block');
   },
    'mouseleave': function(e){
     if ($chk(e.target.getParent(this.submenu))) {
      e.target.getParent(this.submenu)
       .setStyle('display', 'none');
     } else if ($chk(e.target.getParent(this.menu))) {
      e.target.getChildren(this.submenu)
       .setStyle('display', 'none');
     }
   }.bind(this)
  });
 }
});

var FX_DDown_Menu = new Class({
 Extends: DDown_Menu,
 attach: function() {
  this.menu.getChildren('li').addEvents({
   'mouseenter': function(e){
    e.target.getChildren('ul')
     .morph({
      duration: 'long',
      'display' : 'block',
      'opacity': [0, 1]
     });
   }.bind(this),
   'mouseleave': function(e){
    if ($chk(e.target.getParent(this.submenu))){
     e.target.getParent(this.submenu)
      .morph({
       duration: 'long',
       'display' : 'none',
       'opacity': 0
      });
    } else if ($chk(e.target.getParent(this.menu))) {
     e.target.getChildren(this.submenu)
      .morph({
       duration: 'long',
       'display' : 'none',
       'opacity': 0
      });
    }
   }.bind(this)
  });
 }
});

HTML

<ul id="menu">
 <li>
  <a href="#">First Link</a>
  <ul class="links">
   <li><a href="">SubMenu</a></li>
   <li><a href="">SubMenu</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Second Link</a>
  <ul class="links">
   <li><a href="">SubMenu</a></li>
   <li><a href="">SubMenu</a></li>
   <li><a href="">SubMenu</a></li>
   <li><a href="">SubMenu</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Third Link</a>
  <ul class="links">
   <li><a href="">SubMenu</a></li>
  </ul>
 </li>
</ul>

Usage:

// for simple hide/show menus
new DDown_Menu('menu', 'ul.links');
// for simple FX
new FX_DDown_Menu('menu', 'ul.links');

Categories: Clientside

Tags: javascript, mootools, scripts

No Comments

Comments are not allowed