jQuery animate nav list
A jquery plugin that animate a navigation list using horizontal bar that slide up from bottom to top.
by cesar iduarte
HTML
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<ul class="slidyMnu">
<li class="current"><a href="#">Uno</a>
</li>
<li><a href="#">Dos</a>
</li>
<li><a href="#">Tres</a>
</li>
<li><a href="#">Cuatro</a>
</li>
</ul>
CSS
ul.slidyMnu {
overflow:hidden;
}
ul.slidyMnu li {
float:left;
position:relative;
margin:5px;
}
ul.slidyMnu li .bar {
display:block;
height:0px;
position:absolute;
bottom:0px;
width:100%;
z-index:-1;
}
a {
text-decoration:none;
display:block;
padding:5px;
}
/*Demo*/
JavaScript
/**
* slidyMnu - A jQuery animated menu.
* (c) Copyright Cesar Iduarte
* http://www.guirrina.com
* http://www.twitter.com/ciduarte
*/
(function ($) {
$.fn.slidyMnu = function (options) {
var settings = $.extend({
'tag': 'span',
'color': 'ccc',
'height': 5,
'speed': 'slow'
}, options);
showCurrent = function ($target) {
$target.children()
.last()
.css({
'height': settings.height + 'px'
});
};
increaseColorIndex = function (currentIndex, maxIndex) {
currentIndex++;
if (currentIndex >= maxIndex) {
currentIndex = 0;
}
return currentIndex;
};
registerMouseEvents = function ($target) {
$target.on("mouseover", function () {
$(this).children(settings.tag + '.bar').animate({
height: settings.height + "px"
}, settings.speed);
})
.on("mouseout", function () {
$(this).children(settings.tag + '.bar')
.stop(true, true)
.animate({
height: "0px"
}, settings.speed);
});
};
return this.each(function () {
var colorIndex = 0;
var color = new Array();
var colorLen = 0;
var $this = $(this);
if (typeof (settings.color) == "object") {
color = settings.color;
} else {
color.push(settings.color);
}
colorLen = color.length;
$this.addClass('slidyMnu')
.children("li").each(function () {
var $child = $(this);
$child.append("<" + settings.tag + " class='bar' />").children().last().css({
'backgroundColor':...