Loading...Poniżej możesz zobaczyć efekt końcowy tego kursu.
Efekt końcowy — animowane menu
Animowane menu w jQuery — wstęp
Przedstawiona tu płynna animacja paska menu została wykonana przy użyciu rozszerzenia Easing jQuery. Za jego pomocą możemy uzyskać efekt stopniowego przyspieszenia lub zwolnienia animacji, dzięki czemu sprawia ona wrażenie bardziej realistycznej.
Animowane menu. Krok 1 — przygotowanie plików
Struktura katalogów
Następnie importujemy wymagane biblioteki i inne pliki zewnętrzne. Bibliotekę jQuery importujemy z dowolnie wybranego miejsca, ja zdecydowałem się na serwer Google, natomiast wtyczkę Easing pobrałem na swój serwer i umieściłem w folderze js. Tutaj przedstawiam jak powinno to wyglądać w kodzie. Pamiętaj, że kolejność importowania plików ma znaczenie!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Animowany pasek menu</title> <link rel="stylesheet" href="animated-menu.css"/> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="animated-menu.js" type="text/javascript"></script> </head>
Następnie w elemencie body umieść poniższy kod HTML.
<ul> <li class="green"> <p><a href="#">Główna</a></p> <p class="subtext">Tutaj dzieje się najwięcej!</p> </li> <li class="yellow"> <p><a href="#">O autorze</a></p> <p class="subtext">Poznaj autora strony!</p> </li> <li class="red"> <p><a href="#">Kontakt</a></p> <p class="subtext">Bądź w kontakcie!</p> </li> <li class="blue"> <p><a href="#">Wyślij</a></p> <p class="subtext">Wyślij nam swoje pomysły!</p> </li> <li class="purple"> <p><a href="#">Regulamin</a></p> <p class="subtext">Trzymajmy się zasad!</p> </li> </ul>
Krok 2 — dodajemy trochę stylu
Po utworzeniu struktury menu w HTML, dodajemy reguły CSS, aby nadać przyciskom odpowiedni rozmiar i wygląd. Musimy je również ustawić w szeregu.
Aby zapewnić wyświetlanie elementów listy w poziomie, musimy ustawić własność float na left.
Ważne jest też ustawienie własności overflow na hidden. Dzięki temu dodatkowa informacja zostanie wyświetlona dopiero wtedy, gdy będzie dla niej miejsce na przycisku.
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul{
margin:0;
padding:0;
}
li{
width:120px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFF;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext
{
padding-top:15px;
font-weight: 700;
}
/*Kolorujemy przyciski*/
.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}
Krok 3 — Budzimy pasek do życia
Podany kod JavaScript umieszczamy we wcześniej przygotowanym pliku animated-menu.js.
$(document).ready(function(){
// rozwinięcie przycisku
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//Zwinięcie przycisku
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
Skrypt ten zawiera dwie funkcje. Pierwsza odpowiedzialna jest za rozwinięcie przycisku po wskazaniu go myszką do wysokości 150 pikseli w czasie 0,6 sekundy. Funkcja rozszerzenia Easing, z której skorzystaliśmy w tym przykładzie to easeOutOfBounce. Sprawia ona, że przycisk odbija się od dolnej krawędzi kontenera i zatrzymuje się na odpowiedniej wysokości. Druga funkcja powoduje zwinięcie przycisku do domyślnego rozmiaru.
W przypadku użycia tego skryptu na stronie, na której są już inne listy, konieczna może być zmiana selektora li na klasę albo identyfikator.
Podsumowanie
Pasek menu można wyróżnić spośród innych na wiele sposobów Ja zdecydowałem się na dodanie obrazków. Nie bój się eksperymentować, użyj innych kolorów, rozmiarów, czy prędkości animacji, jeśli tylko masz na to ochotę. Z pewnością uda Ci się wtedy dostosować komponent do swoich potrzeb i upodobań, a jeśli przy okazji wyjdzie Ci coś naprawdę wyjątkowego, nie zapomnij podzielić się efektem swojej pracy.
Pobierz gotowe pliki z kodem źródłowym
Zapraszamy zadawania pytań i dzielenia się spostrzeżeniami w komentarzach.
Wysyłam...
Dodaj komentarz