-
Animowane menu za pomocą funkcji jQuery - animate() cz.1
dodano 31.10.2008 / komentarzy: 6 / autor: m1chu
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.
Słowem wstępu o obiekcie naszych zainteresowań ;]
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ż na moim blogu 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.
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.
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;
}Jumping navigation: animacja dzięki jQuery
Po raz kolejny o naszej tytułowej funkcji, tym razem wg. specyfikacji: animate( parametry, [czas_wykonania], [styl_animacji], [akcja_zwrotna] )
- parametry - elementy animacji do wykonania (będące odpowiednikami dyrektyw CSS), np. top, left, marginLeft, width, height, czy opacity. Podawane są w formie nazwa: wartosc i rozdzielane przecinkami.
- czas_wykonywania - czas w milisekundach (lub w postaci wbudowanego ciągu znaków: “slow”, “normal” lub “fast) wykonywania animacji.
- styl_animacji (opcjonalny) - styl animacji, wymaga odpowiedniej wtyczki jQuery obsługującej tą opcję!
- akcja_zwrotna (opcjonalny) - funkcja zwracana wraz z zakończeniem animacji.
Przykład:
$("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
});
});Jumping navigation: rezultat!
Wynik jaki powinniście otrzymać po złożeniu tych części kodu w całość możecie podejrzeć tutaj.
copyright © 2008, m1chu
udostępnione na licencji CC dla vivee.info i m1chu.eu
Komentarze / dodaj komentarz
autor: Burger
dodano: 31.10.2008
To jest dobre, może się przydać
autor: palmiak
dodano: 31.10.2008
Druga część też jest dobra, zapewniam. M1chu naprawdę się postarał.
autor: agressiva
dodano: 31.10.2008
Wszystko sie może przydac, tylko dobrze byłoby z tego rzeczywiscie czasami korzystać… a bardzo rzadko sie z tym spotykam - szkoda…
Druga część jest już znana jak dla mnie, jeżeli niuektórzy korzystają z anglojezycznych stron to też będą wiedzieli skąd to jest. Jak dla mnie zwykłe tłumaczenie, ale jak to się już przyjęło “może się przydać”…
autor: m1chu
dodano: 31.10.2008
Oczywiście nie będę zaprzeczał, pomysł na menu nie jest mój (odnosi się to oczywiście do słów agressivy)
Nie mniej jednak sposób opisu, treść, wykonane przykłady, malutkie zmodowania i grafiki (sic! ;]) są mojego autorstwa. Mam nadzieję, że jest to dostrzegalne i nie macie mi tego za złe :] Bo nawet jeśli opieram to co piszę na innych artach to staram się, żeby nie było to proste “kopiuj, wklej z translacją”.
Pozdrawiam,
m1chu
autor: agressiva
dodano: 31.10.2008
Ja staram się nie powielać tego co już jest napisane w sposób podobny - szczególnie jezeli chodzi o indywidualne rozwiązania. Myślelismy kiedyś o tłumaczeniu ale na razie daliśmy sobie z tym spokój. Nie wiem jak inni ale ja zanim wykorzystam czyjąś pracę piszę i pytam czy autor wyraża zgodę na publikację z wykorzystaniem danej “rzeczy”. Taki mój przyklad to skóry Denisa z Rosji, którego grzecznie zapytałam czy nie miałby nic przeciwko stworznia polskiej wersji jego theme wordpressowych - milo nam było jak wyraził nie tyle zgodę co zadowolenie, ze ktoś jest w stanie docenić jego wysiłek i jeszcze przyczynić się do rozszerzenia projektu.
Nie wiem czy w przypadku Nettuts byłoby takie uprzejme jak Denis - już kiedyś podjęlismy próbę kontaktu w podobnej sprawie jednak bez jakiegokolwiek znaku. Szkoda, widać wielka firma - wielka duma.
autor: m1chu
dodano: 31.10.2008
Agressiva w prawa autorskich NetTuts napisane jest, że zakazuje się kopiowania całego tutoriala w postaci angielskiego, czy przełożonej. To nie jest czysta translacja, a własna interpretacja danego efektu. Po prostu spodobała mi się on i postanowiłem go we własnej formie wytłumaczyć. I oczywiście masz rację, że mogłem spytać autora - po prostu nie pomyślałem w tą stronę, że jeżeli opieram się na samym wspomnianym już efekcie, to łamię czyjeś prawa. Może ciut za bardzo się zapędziłem…
Jeśli nie będziecie chcieli z tego powodu opublikować artykułu, zrozumiem. Następnym razem postaram się napisać kod całkowicie od nowa, modyfikując działanie tak, żeby jak najmniej przypominało pierwowzór. O ile będę się na czymś wzorował, oczywiście.
Reasumując nie miałem złych intencji. Naniosłem stosowną adnotację do artykułu.
Napisz komentarz