Update (15 Oct 2007): Modified CSS and JavaScript to handle window resize issues.

The button flick I’m recreating can be found at Mihn Long I, which is a pretty nice looking site overall. The navigation bar at the top right displays buttons that have a cool mouseover effect that I tried to mimic with Mootools. Here is the end result.

Note: The demo uses png images so it won’t look the greatest in IE6.

The HTML

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a class="active" href="#">Current page</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Nothing fancy, just an unordered list turned navigation bar.

The CSS

#nav {
  list-style:none;
  float:right;
}
#nav li {
  float:left;
}
#nav a, #nav a .btn {
  width:135px;
  height:30px;
  text-align:center;
  padding-top:11px;
  text-decoration:none;
  font-family:Arial, sans-serif;
  font-weight:bold;
  letter-spacing:-1px;
}
#nav a {
  background:url(btn.png) no-repeat top left;
  display:block;
  color:#fff;
  font-size:0.9em;
  position:relative;
}
#nav a.active {
  cursor:default;
}
#nav .btn {
  background:url(btn1.png) no-repeat top left;
  color:#6E6941;
}

Nothing all too unique here either. One thing to note, however, is the class .btn that we’re styling. An element will be created with that class in the JavaScript later on. Here, we give it a background image and set its height equal to the height of the image minus any top or bottom padding applied. In this case, the image height is 41px, so the height of .btn is 30px because there’s a top padding of 11px. The width of .btn is one less that of the background image so the border is only one pixel wide instead of two. The nav link also has this width and height applied, but a different background image of the same size.

The JavaScript

var ButtonFlick = {
  start: function () {
    $$('#nav li a').each(function(el){
      if (el.hasClass('active')) return;
      var text = el.getText();
      var button = new Element('div', {'class':'btn'})
       .setText(text)
       .injectInside(el);
      var buttonfx = new Fx.Slide(button, {
        'wait':false,
        'transition':Fx.Transitions.Cubic.easeInOut,
        'duration':350
      });
      buttonfx.wrapper.setStyles({
        'position': 'absolute',
        'top': 0,
        'left': 0
      });
      el.addEvents({
        'mouseenter': function () {
          buttonfx.slideOut();
        },
        'mouseleave': function () {
          buttonfx.slideIn();
        }
      });
    });
  }
}
 
window.addEvent('load', ButtonFlick.start);

First, we create an object to store our awesome effect in and start with the function start(), which happens to be the only one we need. In that function, we first find all of the links within the nav bar. Then we iterate through them using each(). If a particular link has a class of active we return so nothing happens. Otherwise, we create an element with a class of btn and inject it inside the link.

After that, we create a slide effect for the new element giving it a few options. In order to overlay the new element exactly over our link, we have to do a little trick. Looking at the MooTools Fx.Slide code, you’ll notice that MooTools creates a wrapper for the sliding element. For everything to work right, we need to position the wrapper instead of our new element. So we set the wrapper top and left to the top and left of the link, plus position absolute so we can move it in the first place.

Finally, events are added to the link so the new element slides out when the mouse is over the link and slides back in when the mouse leaves the link.

To get it all started, we add ButtonFlick.start to the window load event. Demo.

Modifications

If you want the nav bar floated to the left, be sure to change the background image alignment to right so the image border appears on the right side.

When creating the images in Photoshop, I applied a drop shadow to the lower image only as applying it to both would darken the drop shadow when one image was on top of the other. I cropped the top image as if it had a drop shadow so the images would line up when placed over one another.

This entry was posted on Sunday, September 16th, 2007 at 1:26 am and is filed under flash without flash and tagged with button-flick, demo, flash, mootools, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.