Fancy Navigation with MooTools JavaScript
Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect.
The XHTML
<ul> <li><a href="somewhere.php" class="nav">Nav Item 1</a></li> <li><a href="somewhere.php" class="nav">Nav Item 2</a></li> <li><a href="somewhere.php" class="nav">Nav Item 3</a></li> <li><a href="somewhere.php" class="nav">Nav Item 4</a></li> <li><a href="somewhere.php" class="nav">Nav Item 5</a></li> <li><a href="somewhere.php" class="nav">Nav Item 6</a></li> <li><a href="somewhere.php" class="nav">Nav Item 7</a></li> <li><a href="somewhere.php" class="nav">Nav Item 8</a></li> <li><a href="somewhere.php" class="nav">Nav Item 9</a></li> <li><a href="somewhere.php" class="nav">Nav Item 10</a></li> </ul>
Just some simple XHTML links with the nav class. Nothing special here.
The CSS
.nav { background:#000; color:#ddd; display:block; width:200px; }
I've placed a default background color on my anchors. This will come into play with the MooTools color change.
The MooTools JavaScript
window.addEvent('domready', function() {
$each($$('a.nav'),function(el) {
el.addEvent('mouseenter', function() {
el.highlight(el.getStyle('background-color'),'#333');
});
el.addEvent('mouseleave', function() {
el.highlight(el.getStyle('background-color'),'#000');
});
});
});
For every link with the nav class, we add a MooTools highlight() effect on both mouseenterand mouseleave View Demo
the good/short code
$$('a.nav').addEvents({ mouseenter: function(){ $(this).highlight($(this).getStyle('background-color'),'#333'); }, mouseleave: function(){ $(this).highlight($(this).getStyle('background-color'),'#000'); } });Why not
<ul class="nav">and then:$$(’.nav a’).addEvents({ mouseenter: function(){ $(this).highlight($(this).getStyle(’background-color’),’#333′); }, mouseleave: function(){ $(this).highlight($(this).getStyle(’background-color’),’#000′); } });@Steinmann: Awesome idea, I have no idea how I missed that. I must be working to much lately…
Still a lot of coolness for such a little function :)
A similar effect in jQuery:
$(".nav").hover(function(){ $(this).fadeOut(0); },function(){ $(this).fadeIn("slow"); })Though to do it properly you really need http://plugins.jquery.com/project/color
I think there might be problems with opera 9.6.
The highlight effect doesn`t work.
Forgive me, but I’m having a hard time finding an example of the plugin in action on this page. Wouldn’t it be a good idea to simply show folks what the working result looks like? Because I’m certainly not going to invest time setting this all up if it’s just on the hope that it’s exactly what I’m looking for.
You might find these menu effects compelling, built using the UIZE JavaScript Framework…
http://www.uize.com/examples/hover-fader-color-effects.html
Awesome Chris!
Really awesome Chris! Not as subtle as I like but I think it would appeal to many others.