I thought I’d update an old demo I did for Mootools way back even before rev86. And this time I’ll explain it (I’ve even installed a syntax highlighter so I could do just that). The new demo uses v1.11.

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.

And that’s it! Wasn’t too hard, was it?

Check out my mootools sidebar demo and cool text hover effect, too.

This entry was posted on Tuesday, July 31st, 2007 at 12:49 am and is filed under tutorials and tagged with demo, javascript, mootools, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.