This menu build did for Mootools way back even before rev86.

First, we’ll start off with the HTML so we know what the DOM looks like before we start trying to manipulate it. All we’re going to be using is a simple unordered list.

<ul id="nav">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Next let’s look at the CSS:

#nav a {
  padding:12px;
  line-height:50px;
  background:#f0f0f0;
  color:#666;
  text-decoration:none;
}
#nav a:hover {
  color:#000;
  background:none;
}
#nav {
  text-align:center;
  list-style:none;
  margin:0;
  padding:0;
}
#nav li {
  display:inline;
  vertical-align:middle;
  font-size:12px;
}

Also pretty simple, but there is something important to note. Notice the large line-height for the link and the vertical-align: middle for the li. These styles assure that the non-active links don’t move up and down when other links are hovered over, since in our JavaScript, we’ll be increasing the font size of the active link.

And finally here’s the JavaScript:

window.addEvent('load', function ()
{
  $('nav').getChildren().each(function(el){
    var effect = el.effect('font-size',
    {
      duration: 400,
      transition: Fx.Transitions.Expo.easeOut,
      wait: false
    });
    el.orgSize = el.getStyle('font-size').toInt();
    el.addEvents(
    {
      'mouseover': function ()
      {
        effect.start(el.orgSize * 2);
      },
      'mouseout': function ()
      {
        effect.start(el.orgSize);
      }
    });
  });
});

Now let me explain what’s going on here. First of all, we want to wait until the page is loaded before we try assigning events to any elements. Then we get the #nav element’s children and start an each() loop. In that loop, we make an effect that will adjust the li element’s font size. Additional options are passed in an object. The duration and transition are self-explanatory, but what wait: false does is make sure the effect stops if it’s started again before it’s completed (try setting it to true in the final code if you’re curious what will happen).

We also want to save the original font size so we store that in a property of the li element for easy access later. By using getStyle(‘font-size’) the value plus ‘px’ will be returned, which is why toInt() is used because we’ll want to do some calculations with it later.

After that, we want to add events to the li element, in particular, mouseover and mouseout. In the mouseover event, we want to make the font size larger. In the example, I multiplied the original size by two. In the mouseout event, we return the font size to normal.

Demo: http://www.chromasynthetic.com/blog/uploads/mootools_nav_example.html

Download: http://protovis-js.googlecode.com/files/protovis-dev.js

Source: http://www.chromasynthetic.com/blog/mootools-demo-redux/57/

Related Listings:

1. Dynamic Text Effects – MooTools Dynamic text effects (fade ins, moving text, etc.) can enhance...
2. Fancy Mootools Date Picker this uses MooTools v1.11. I’ll be releasing a new version...
3. jQuery Tabbed Interface Script Nowadays, a lot of websites are using tab based content...
4. Dynamic Cookie Crumbs This bit of JavaScript allows you to place a breadcrumb...
5. sLedit – Inplace editor for mootools I’ve had a lot of requests to send people mooEdit....

Do you like this post?

Email: