The underlying mark-up for the plugin to use can be as follows:
<ul class="hover-css" id="nav"> <li class="one"><a title="One" href="#">One</a></li> <li class="two"><a title="Two" href="#">Two</a></li> <li class="three"><a title="Three" href="#">Three</a></li> <li class="four"><a title="Four" href="#">Four</a></li> <li class="five"><a title="Five" href="#">Five</a></li> </ul>
The hover-css class is used so that the menu still has simple css hover states when JS is disabled, but doesn't interfere with the animations when JS is enabled.
We can the set the normal hover states using CSS, e.g.
#nav li { list-style-type:none; float:left; }
.hover-css a { display:block; height:0; padding-top:51px; position:relative; overflow:hidden; background:url(menu.png) no-repeat 0 0; }
.hover-css .one a { width:113px; }
.hover-css .one a:hover { background-position:0 -51px; }
.hover-css .two a { width:107px; background-position:-113px 0; }
.hover-css .two a:hover { width:107px; background-position:-113px -51px; }
.hover-css .three a { width:130px; background-position:-220px 0; }
.hover-css .three a:hover { width:130px; background-position:-220px -51px; }
.hover-css .four a { width:124px; background-position:-350px 0; }
.hover-css .four a:hover { width:124px; background-position:-350px -51px; }
.hover-css .five a { width:113px; background-position:-474px 0; }
.hover-css .five a:hover { width:113px; background-position:-474px -51px; }
Which will make the menu will appear like this:
To add the animated hover states you need to update your css so that it uses the hover-anims class name and the <span> elements that get created:
.hover-css a, .hover-anims a, .hover-anims span { display:block; height:0; padding-top:51px; position:relative; overflow:hidden; background:url(menu.png) no-repeat 0 0; }
.hover-anims span { position:absolute; left:0; top:0; }
.hover-css .one a, .hover-anims .one a, .hover-anims .one span { width:113px; }
.hover-css .one a:hover, .hover-anims .one span { background-position:0 -51px; }
.hover-css .two a, .hover-anims .two a { width:107px; background-position:-113px 0; }
.hover-css .two a:hover, .hover-anims .two span { width:107px; background-position:-113px -51px; }
.hover-css .three a, .hover-anims .three a { width:130px; background-position:-220px 0; }
.hover-css .three a:hover, .hover-anims .three span { width:130px; background-position:-220px -51px; }
.hover-css .four a, .hover-anims .four a { width:124px; background-position:-350px 0; }
.hover-css .four a:hover, .hover-anims .four span { width:124px; background-position:-350px -51px; }
.hover-css .five a, .hover-anims .five a { width:113px; background-position:-474px 0; }
.hover-css .five a:hover, .hover-anims .five span { width:113px; background-position:-474px -51px; }
Then call the hoverFade() method on the menu:
$("#nav").hoverFade();
This will swap the class names on the menu, create the spans and enabled the animated hovers, as in the following menu:
To set one of the elements to permanently on just give the element the class name specified by the onClass option in the HTML:
<li class="on one"><a title="One" href="#">One</a></li>
The plugin will automatically stop animating that element, like the following menu:
If there were other span elements within the anchors in the menu (as a result of the design perhaps), these spans would automatically be hidden by the plugin, like in the following menu, which contains nested spans:
<ul class="hover-css" id="nav-4"> <li class="one"><a title="One" href="#">One<span class="other">SPAN!</span></a></li> <li class="two"><a title="Two" href="#">Two<span class="other">SPAN!</span></a></li> <li class="three"><a title="Three" href="#">Three<span class="other">SPAN!</span></a></li> <li class="four"><a title="Four" href="#">Four<span class="other">SPAN!</span></a></li> <li class="five"><a title="Five" href="#">Five<span class="other">SPAN!</span></a></li> </ul>
The spans end up hidden when the page loads, and get animated along with the actual animated hovers [fail]:
To prevent this from happening, use the ignoreSiblings option in a configuration object when calling the method:
$("#nav").hoverFade({
ignoreSiglings: ".other"
});
So now the spans are visible and do not get animated:
Note that you may need to override the CSS of the nested spans with something like the following, so that they are not styled like the spans that get inserted:
.hover-anims a span.other {
display:inline; width:auto; height:auto; padding:0;
position:absolute; left:auto; right:5px; top:2px; z-index:10;
font:10px Arial; color:red; background:none;
}