Menu w jQuery

W niniejszym tutorialu stworzymy menu w jquery. Efekt końcowy przedstawia się następująco - demo. Na listingu poniżej przedstawiam kod html.

<ul id="menu">
	<li><a class="h home" href="#">HOME</a><a class="n" href="#">HOME</a></li>
	<li><a class="h portfolio" href="#">PORTFOLIO</a><a class="n" href="#">PORTFOLIO</a>
	<li><a class="h o_nas" href="#">O NAS</a><a class="n" href="#">O NAS</a></li>
	<li><a class="h projekty" href="#">PROJEKTY</a><a class="n" href="#">PROJEKTY</a></li>
	<li><a class="h kontakt" href="#">KONTAKT</a><a class="n" href="#">KONTAKT</a></li></li>
</ul>

Jak widzimy w każdym li mamy po dwa elementy a. Elementy o klasie h będą się pojawiać po najechaniu kursorem myszy na określoną pozycję. W tym samym czasie elementy o klasie n będą zjeżdzać w dół. Wszystko będzie się odbywać za pomocą kilku linijek kodu jquery. Najpierw trzeba jednak napisać styl css.

body {
	background:black;
	color:white;
}
#menu {
	margin:0;
	padding:0;
	height:22px;
	margin:50px auto 0 auto;
	position:relative;
	overflow:hidden;
}
#menu li{
	float:left;
	list-style:none;
}
#menu li a{
	font-size:18px;
	font-family: Arial, Helvetica, sans-serif;
	color:white;
	text-decoration:none;
	padding:0 10px 0 10px;
	position:relative;
}
#menu li a.h{
	color: #339999;
	position:absolute;
	top:-20px;
}
#menu li a.down{
	top:20px;
}
#menu li a.active{
	top:0px;
}
#menu li a.portfolio {
	color:#cc33cc;
}
#menu li a.o_nas {
	color:#3399cc;
}
#menu li a.projekty {
	color:#009933;
}
#menu li a.kontakt {
	color:#cc6600;
}

Kluczowymi fragmentami są style dla następujących elementów

#menu li a.h{
	color: #339999;
	position:absolute;
	top:-20px;
}
#menu li a.down{
	top:20px;
}
#menu li a.active{
	top:0px;
}

Ważne jest tu pozycjonowanie elementów. To na pozycji top będziemy operować w javascripcie. Doczepiamy do elementów li zdarzenie hover. Funkcja obsługująca zachowanie po najechaniu przesuwa element o klasie n (czyli podstawowy) w dół aby go ukryć oraz nadaje mu klasę down. Natomiast element o klasie h przesuwa również w dół do pozycji top: 0px (wcześniej było top: -20px) i nadaje mu klasę active. Funkcja wykonywana po zjechaniu jest bardzo podobna. Jedyną różnicą są animacje przywracające pierwotne pozycje elementów oraz zdejmowanie odpowiednich klas zamiast ich dodawania. Pełny kod javascript poniżej.

$(document).ready(function() {
	$("#menu li").hover(
		function () {
			//po najechaniu na li
			$(this).find('a.n').stop().animate({
				top: '20px'
				}, 400, function() {
				$(this).find('a.n').addClass("down");
			});
			$(this).find('a.n').prev().stop().animate({
				top: '0px'
				}, 400, function() {
				$(this).find('a.n').prev().addClass("active");
			});
		},
		function () {
			//po zjechaniu na li
			$(this).find('a.n').stop().animate({
				top: '0px'
				}, 400, function() {
				$(this).find('a.n').removeClass("down");
			});
			$(this).find('a.n').prev().stop().animate({
				top: '-20px'
				}, 400, function() {
				$(this).find('a.n').prev().removeClass("active");
			});
		}
	);
});