Efektowne menu w css i jQuery

Stworzymy menu w css i jQuery. Wykorzystamy oprócz biblioteki jQuery plugin Alexandra Farkasa. Dzięki niemu można zastosować animację pozycji tła określonego elementu. Tak prezentuje się efekt końcowy menu.
Zaczniemy od stworzenia menu w css. Kod html przedstawiam poniżej.

<ul class="lista">
	<li><a href="http://designconcept.webdev20.pl"><span>jeden</span></a></li>
	<li><a href="http://designconcept.webdev20.pl"><span>dwa</span></a></li>
	<li><a href="http://designconcept.webdev20.pl"><span>trzy</span></a></li>
	<li><a href="http://designconcept.webdev20.pl"><span>cztery</span></a></li>
	<li><a href="http://designconcept.webdev20.pl"><span>lorem ipsum</span></a></li>
</ul>
Jest to po prostu lista zawierająca odnośniki oraz elementy span (będą one potrzebne do zastosowania animacji). Będziemy potrzebowali trzech obrazków – tło ogólne menu, tło elementu <a> oraz tło dla efektu hover. Są to odpowiednio: menubg.png, abg1.png i abg2.png. Kod css menu oraz całej strony przedstawia się następująco.
body
{
	margin:0;
	padding:0;
	background: #1f76ce;
}
ul.lista
{
	height: 40px;
	width: 800px;
	margin:10px 0 0 10px;
	padding:0;
	background: url("menubg.png") no-repeat;
}
ul.lista li
{
	font: 11px Tahoma, Verdana, sans-serif;
	float: left;
	list-style: none;
}
ul.lista * a
{
	text-decoration:none;
	color: #00758F;
	float:left;
	height: 40px;
	line-height: 24px;
	font-weight: bold;
	cursor: pointer;
	margin: 7px 10px 0 5px;
	text-align: center;
	background: url("abg1.png") no-repeat left top;
	width: 125px;
}
ul.lista * a span
{
	background: url("abg1.png") no-repeat 125px top;
	height: 40px;
	float: left;
	width: 125px;
}
Teraz czas na implementację efektu w jQuery. Nie należy oczywiście zapomnieć o dołączeniu do strony kodu biblioteki oraz kodu plugina. Kod jQuery dla naszego przykładu przedstawia się następująco.
$(document).ready(
function() {
	$('ul.lista li a').hover(function(){
		$(this).find('span').css({'background': 'url("abg2.png") no-repeat 125px 0'}).animate({'backgroundPosition': '0 0'},1000
	);
		},
	function(){
		$(this).find('span').css({'background': 'url("abg1.png") no-repeat 125px 0'}).stop();
	});
}
);
Cały kod zostanie wykonany po załadowaniu strony. Kluczowym elementem powyższego kodu jest funkcja hover (wykonywana dla każdego odnośnika zawartego wewnątrz naszej listy). Pierwszy parametr funkcji hover zawiera funkcję, która zostanie wykonana po najechaniu na element, a drugi po opuszczeniu elementu. W jQuery $(this) oznacza aktualnie złapany element (u nas będzie to odnośnik, nad którym aktualnie znajduje się wskaźnik myszy). Następnie dla takiego odnośnika znajdujemy span wewnątrz niego oraz ustawiamy tło na abg2.png. Ważną sprawą jest ustawienie pozycji tła na 125px od lewej (tak samo jak w arkuszu css). Dzięki temu zastosowana później funkcja animate, która ustawia pozycję tła na 0 0, wywołuje efekt najazdu nowego tła od prawej do lewej. Funkcja wykonywana po zjechaniu elementu ustawia pierwotne tło oraz zatrzymuje animację za pomocą stop().