2 animowane menu za pomocą funkcji jQuery – animate()

Mając do dyspozycji jQuery możemy dokonać wielu mniej lub bardziej oryginalnych modyfikacji dla urozmaicenia wyglądu tworzonej przez nas nawigacji na stronie. Funkcja animate() znakomicie nadaje się do kreowania animacji różnego typu relatywnie lub absolutnie pozycjonowanych elementów pozwalając na operowanie np. na ich szerokości, czy wysokości.

animate() – funkcja zezwalająca na wykonywanie animacji elementów strony. Pozwala na działanie na właściwościach stylów takich jak szerokość (width), wysokość (height), padding, margines (margin), krawędź (border), górny brzeg elementu (top), czy wielkość czcionki (font-size). Dozwolone są więc właściwości przyjmujące wartości numeryczne (bądź „toggle”, „show” lub „hide”), a zapis ich nazw musi być w formie CamelCase, czyli poprzez bikapitalizację pojęć złożonych (usunięcie spacji i zastąpienie pierwszych znaków kolejnych słów dużymi literami). Przykładowo odpowiednikiem margin-right będzie marginRight. Od wersji 1.2 jQuery pozwala je animować poprzez nadanie w.w. wartości także w postaci em i %. Wprowadzono w nim także krótkie zwiększanie („+=”, np. width: „+=5px”) i zmniejszanie („-=”, np. height: „-=”+value) wartości.

Przygotowanie grafiki…

Po przeczytaniu tego artykułu dowiesz się jak utworzyć dwa typy różnych menu oparty na frameworku jQuery, CSS-ie i (X)HTML-ie. Przykłady zastosowane w artykule będą przystosowane do XHTML-a/HTML-a wysyłanego jako text/html, a także do XHTML-a wysyłanego jako application/xhtml+xml.

Pierwszy z naszych efektów będzie opierał się na gotowych elementach graficzny oraz dla ukazania zwiększonych możliwości na jednej grafice będącej logiem konkretnego serwisu. Zastosujemy w tym przypadku opisywany już przeze mnie efekt sliding-doors (także wyjaśniany na vivee) dzięki któremu pozbędziemy się problemu związanego z nadmiernym ładowaniem grafik.

Potrzebne będzie nam sześć obrazków. Trzy z których będziemy korzystać dla wyświetlania w stanie nie najechania myszką, w stanie najechania i w stanie kliknięcia (bądź wyboru za pomocą tabulatora), oraz drugie trzy używane w takiej samej kolejności, ale które będą stworzone specjalnie dla przykładu użycia grafiki oddzielnego typu dla konkretnego przycisku. Należy pamiętać, aby realna wysokość grafiki była co najmniej tak duża, żeby spełniała potrzeby po, a nie przed pojawieniem się kursora nad nią. Tak więc, jeśli np. w normalnej pozycji ma ona 57px, a po rozszerzeniu o 10px więcej to szerokość jednego, pojedynczego obrazu nie powinna być mniejsza niż 67px.

Jak widać na wyżej załączonym screenie dzielimy przyciski na trzy kolumny – lewą, prawą i środek. Dwie pierwsze w naszym rozwiązaniu będą stałe, a środek będzie powielany w arkuszu stylów względem osi X (repeat-x). W przypadku wspomnianego już przycisku specjalnego ten podział nie istnieje (zapisujemy całość), gdyż szerokość generowanego w HTML-u rozwiązania będzie niezmienna.

I. Jumping navigation (nawigacja „podskakująca”): kod XHTML

Kod struktury menu oprę o znaczniki listowania które oczywiście należy wstawić w sekcję body.

<ul id="jumping-nav">
	<li><a href="#" title="#"><span class="left"></span>Link 1<span class="right"></span></a></li>
	<li><a href="#" title="#"><span class="left"></span>Link 2<span class="right"></span></a></li>
	<li><a href="http://m1chu.eu/" title="Programowanie, webdeveloping"><span class="left"></span>m1chu.eu<span class="right"></span></a></li>
	<li id="with-image"><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków"></a></li>
</ul>

Jak można zauważyć w trzech pierwszych odnośnikach nawigacji na stronie znajduje się tekst oraz znaczniki span. Odpowiadają one za wyświetlenie lewej oraz prawej krawędzi tła każdego z przycisków menu. W wypadku ostatniego linka nie jest to potrzebne, gdyż tło jest jednolitej szerokości, a tekst naniesiony jest bezpośrednio na nim. Specjalny element tej listy oznaczony jest ID with-image.

I. Jumping navigation: kod CSS

ul#jumping-nav
{
	position: relative;
	float: left; /* przemianowanie listy na szeregową */
	overflow: hidden;
	border-bottom: 1px solid #fff;
	padding: 0 10px;
	list-style: none;
	height: 4em; /* szerokosc przycisku */
}

ul#jumping-nav li, ul#jumping-nav li a
{
	position: relative;
	float: left; /* przemianowanie listy na szeregową */
} 

ul#jumping-nav li
{
	background: none;
	margin: 0;
	padding: 0;
	padding-left: 1px; /* 1-pikselowe rozdzielenie dwoch przyciskow od siebie */
	top: 15px; /* odleglosc od gornej krawedzi danej listy */
}

ul#jumping-nav li a
{
	display: block;
	background: url('srodkowa_czesc_grafiki.png') 0 0 repeat-x; /* adres do grafiki srodka przycisku powtarzany na osi X */
	padding: 0.9em 1.1em;
	text-decoration: none;
	color: #129397;
	height: 57px;
}

ul#jumping-nav li a span.left {
	display: block;
	/* pozycja absolutna */
	position: absolute;
	background: url('lewa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki lewej krawedzi przycisku */
	height: 57px;
	width: 12px;
	/* ustawienie grafiki lewej krawedzi w pozycji lewego, gornego rogu elementu listy */
	left: 0;
	top: 0;
	z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
}

ul#jumping-nav li a span.right {
	display: block;
	/* pozycja absolutna */
	position: absolute;
	background: url('prawa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki prawej krawedzi przycisku */
	height: 57px;
	width: 12px;
	/* ustawienie grafiki prawej krawedzi w pozycji prawego, gornego rogu elementu listy */
	right: 0;
	top: 0;
	z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
}

/* zmiany dokonywane przy najechaniu mysza na przycisk (grafika srodkowa + grafiki krawedzi) */
ul#jumping-nav li a:hover, ul#jumping-nav li a:hover span
{
	background-position: 0 -57px; /* przesuniecie pozycji tla o 57px w dol */
	color: #3f5f5a;
}

/* zmiany dokonywane przy kliknieciu mysza na przycisk lub po zaznaczeniu jej tabulatorem (grafika srodkowa + grafiki krawedzi) */
ul#jumping-nav li a:active, ul#jumping-nav li a:active span, ul#jumping-nav li a:focus, ul#jumping-nav li a:focus span
{
	background-position: 0 -114px; /* przesuniecie pozycji tla o 114px w dol */
	color: #333;
}

Stosowne komentarze pozostawiłem w kodzie. Wytłumaczyć należałoby za to dokładniej zastosowaną w bloku elementu listy odległość od górnej granicy tejże listy.

top: 15px; /* odleglosc od gornej krawedzi danej listy */

Odległość ta pozwala na ustalenie pozycji wyjściowej przycisków i będzie tak samo na stałe ustawiona w kodzie jQuery. Odejmując od niej otrzymamy pożądany przez nas efekt podniesienia przycisku po najechaniu na niego kursorem.

O czymś jednak pozornie zapomniałem w powyższym kodzie. Mianowicie o wspomnianym już przycisku specjalnym znajdującym się w tagu li o ID with-image. Sprawa jest prosta, a jej rozwiązanie będzie opierać się o dodanie kodu opartego na dwóch ostatnich blokach podanych w w.w. kodzie CSS.

ul#jumping-nav li#with-image a
{
	display: block;
	padding: 0.9em 1.1em;
	background: url('grafika_specjalna.png') 0 0 no-repeat; /* brak powtarzania w jakiejkolwiek osi */
	color: #333;
	text-decoration: none;
	height: 57px;
	width: 117px; /* okreslona na stale szerokosc przycisku */
}

/* zmiany dokonywane po najechaniu mysza na przycisk specjalny */
ul#jumping-nav li#with-image a:hover
{
	background-position: 0 -57px;
}

/* zmiany dokonywane przy kliknieciu mysza na przycisku specjalnym lub po zaznaczeniu jej tabulatorem */
ul#jumping-nav li#with-image a:active, ul#jumping-nav li#with-image a:focus
{
	background-position: 0 -114px;
}

I. Jumping navigation: animacja dzięki jQuery

$("div").animate({
      left: "15px", opacity: .5
}, 300, "easing", function(){alert("koniec!");});

Na początek należy ściągnąć i zaimportować na swoją stronę najnowszą wersję jQuery. Pobrać ją można np. stąd.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <!-- jeżeli biblioteka będzie znajdować się w głównym katalogu strony -->

Nasz kod będzie przeznaczony dla jednego tego typu menu na danej podstronie. Po załadowaniu DOM zostanie wywołane zdarzenie :hover jQuery, a w nim funkcje wykonywane kolejno po najechaniu i po usunięciu kursora myszy z danego przycisku.

$(document).ready(function() {
    $('ul#jumping-nav li').hover(function() {
    	$(this).animate({ top : "-=10px" }, 150); // przesuniecie krawedzi przycisku o 10px w gore w czasie 150ms
    }, function() {
    	$(this).animate({ top : "15px" }, 150); // przesuniecie krawedzi do pozycji wejsciowej w czasie 150ms
    });
});

I. Jumping navigation: rezultat!

Wynik jaki powinniście otrzymać po złożeniu tych części kodu w całość możecie podejrzeć tutaj.

II. Floating navigation (nawigacja pływająca): kod XHTML

Drugi przykład będzie ciut bardziej zaawansowany (pomysłodawcą i autorem efektu jest Bedrich Rios). Pod tym względem, że przedstawię użycie dwóch menu razem na stronie. Jednego poziomego i drugiego pionowego. Elementy graficzne obydwu będą opierać się tylko i wyłącznie o arkusz stylów.

Dla usystematyzowania położenia obydwu list odpowiedzialnych za wyświetlanie nawigacji na stronie wstawimy je w element blokowy div. Ponieważ będziemy chcieli, aby każde menu w trakcie wyświetlania aktywnego elementu podświetlane było na inny kolor to każdemu z nich nadamy odpowiedni identyfikator. Odpowiednio będą to yellow (gdzie tekst będzie podświetlany na odcień żółtego) i blue (gdzie tekst będzie podświetlany na odcień niebieskiego).

Ostatecznie naszym zamiarem jest dodanie także przy każdym menu tytułu. Aby jednak skrypt mógł rozróżnić go od normalnego pola z odnośnikiem musimy zastosować znacznik nagłówka. W naszym wypadku jest to h4.

<div id="nav-block">
	<ul class="floating-navigation" id="yellow">
		<li><h4>Menu główne!</h4></li> <!-- nagłówek menu poziomego -->
		<li><a href="#" title="#">Odnośnik 1</a></li>

		<li><a href="#" title="#">Odnośnik 2</a></li>
		<li><a href="http://thenet.pl/" title="Technologiczne spojrzenie na świat" onclick="this.target='_blank';">thenet.pl</a></li>
		<li><a href="http://after-all.eu/" title="Nowoczesny bash z cytatami z IRC" onclick="this.target='_blank';">after-all.eu</a></li>
	</ul>
	<ul class="floating-navigation" id="blue">
		<li><h4>Menu boczne!</h4></li> <!-- nagłówek menu pionowego -->
		<li><a href="#" title="#">Odnośnik 1</a></li>
		<li><a href="#" title="#">Odnośnik 2</a></li>
		<li><a href="http://m1chu.eu/" title="Another devblog - programowanie, webdeveloping" onclick="this.target='_blank';">m1chu.eu</a></li>
		<li><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków" onclick="this.target='_blank';">utnij.eu</a></li>
	</ul>
</div>

II. Floating navigation: kod CSS

ul.floating-navigation
{
	list-style-type: none;
	font-size: 12px;
	margin: 30px 0px; /* odleglosc od lewej i prawej krawedzi */
	padding-top: 10px;
	& padding-left: 30px; /* padding zastepujacy margines w IE */
	width: 985px; /* szerokosc wszystkich elementow poziomego menu + suma wymaganych szerokosci w efekcie "wjezdzania" (podawana w funkcji JS floatNav()) */
}

ul.floating-navigation li h4,
ul.floating-navigation li a
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 2px;
}

ul.floating-navigation li h4
{
	color: #fff;
	background: #333;
	border: 1px solid #1a1a1a;
	font-weight: normal;
	font-size: 12px;
}

ul.floating-navigation li a
{
	color: #999;
	border: 1px solid #1a1a1a;
	background: #222;
	text-decoration: none;
	opacity: .7; /* opcjonalna przezroczystosc elementow */
}

ul#yellow li
{
	float: left; /* ustawienie w szeregu elementow listy w menu glownym - utworzenie menu poziomego */
}

ul#yellow li a:hover
{
	color: #ffff66; /* kolor tekst gdy myszka jest na obiekcie w menu poziomym */
	background-color: #1e1e1e;
}

ul#blue li a:hover
{
	color: #006699; /* kolor tekst gdy myszka jest na obiekcie w menu pionowym */
	background-color: #1e1e1e;
}

Jedynym aspektem który należałoby wytłumaczyć jest magiczne & padding-left: 30px;. Jest to wartość która tylko i wyłącznie pozycjonuje rozmieszczenie elementów którymi się tutaj zajmujemy. Zastanawiacie się za pewnie co robi to & przez tą regułą? Jest to tzw. hack IE który działaja podobnie jak najbardziej znany * i dzięki którym dana dyrektywa wykonywana jest tylko w przeglądarkach opartych na Internet Explorerze. Musieliśmy dokonać takiego zabiegu, gdyż inaczej marginesy w przeglądarce Microsoftu byłyby ustawione na 0 (z niewiedzy, złej implementacji, złośliwości jej programistów… jak zwał, tak zwał :D).

II. Floating navigation: animacja dzięki jQuery

Podobnie jak w poprzednim typie nawigacji tutaj także trzeba skorzystać z ściągniętej już wcześniej biblioteki jQuery.

Tym razem jednak po załadowaniu DOM wywołamy kolejno dwie funkcje.

$(document).ready(function()
{
	floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
	floatNav("ul#blue", 25, 15, 150, .7, 500);
});

Posiadają one siedem parametrów o niżej wymienionym przeznaczeniu.

floatNav(id_listy_menu, paddingLeft_gdy_kursor_jest_na_obiekcie, paddingLeft_gdy_kursor_jest_poza_obiektem, czas_wykonywania_animacji, mnoznik_kolejnego_animowania_wlotu_elementow_po_zaladowaniu_DOM [, kolor_napisow_menu_po_kliknieciu]);

Ostatni parametr jest opcjonalny. W wypadku, gdy nie zostanie podany po kliknięciu zostanie zwrócony domyślny kolor. Należy zdawać sobie także sprawę, że ten sposób zadziała tylko w wypadku otwierania stron w oknach innych niż te używane przez skrypt.

function floatNav(float_nav_id, float_hover_out, float_hover_in, float_run_time, float_multiplier, float_click_effect, float_clicked_color)
{
	var list_elements = float_nav_id + " li";
	var link_elements = list_elements + " a";

	var timer = 0; // czas poczatkowy

	$(list_elements).each(function(i) // wczytywanie elementow po zaladowaniu strony
	{
		timer = (timer * float_multiplier + float_run_time); // zmienna przetrzymujaca czas wczytania elementu zwiekszana o wartosc sumy mnoznika i czas dzialania animacji w stosunku do czasu wczytania poprzedniego elementu

		$(this).css("margin-left","-180px"); // wczytanie od strony lewego marginesu i kolejno efekt "wstrzasniecia" z jednej pozycji do drugiej i z powrotem
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: float_hover_out }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	var link_hover_width = $(link_elements).width(); // pobranie szerokosci wejsciowej elementu listy
	$(link_elements).hover(
		function()
		{
			$(this).animate({ paddingLeft: float_hover_out, opacity: 1, width: link_hover_width-(float_hover_out-float_hover_in) }, float_run_time); // w trakcie pojawienia sie kursora na elemencie nastepuje zmiana przezroczystosci na pelna, przesuniecie w prawo oraz zmniejszenie szerokosci elementu
		},
		function()
		{
			$(this).animate({ paddingLeft: float_hover_in, opacity: float_multiplier, width: link_hover_width }, float_run_time); // przywrocenie do wartosci podstawowych po przeniesieniu kursora poza menu
		}
	);

	$(link_elements).click(
		function()
		{
			$(this).fadeOut(float_click_effect); // efekt zanikania
			$(this).fadeIn((float_click_effect/2)); // efekt pojawiania sie w czasie dwukrotnie mniejszym niż w trakcie efektu zanikania
			if ( float_clicked_color != "" )
			{
				$(this).css("color", float_clicked_color); // zmiana koloru kliknietego elementu o ile podany zostal ostatni parametr funkcji nadrzednej
			}
		}
	);
}

$(document).ready(function()
{
	floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
	floatNav("ul#blue", 25, 15, 150, .7, 500);
});

II. Jumping navigation: wynik!

Także tym razem przygotowałem Wam praktyczne zobrazowanie tego co chcieliśmy osiągnąć. O! tutaj, zapraszam.

Kurde! Tyle czytania i nie działa! Dlaczego?!

Obydwie metody testowałem na poniższy przeglądarkach i na wszystkich działały prawidłowo:

• Firefox 3.0.3,
• Opera 9.60
• Safari 3.1.2
• SeaMonkey 1.1.9
• Flock 1.1.1
• Sleipnir 2.7.2

Mogę domniemać, że problem tkwi w użytkowaniu kilku frameworków naraz. Problem ten opisywałem tutaj i radzę od jego przeczytania zacząć rozpoznawanie błędu :]