Tworzenie animowanego menu za pomocą jQuery

17 maja 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Poniżej możesz zobaczyć efekt końcowy tego kursu.

Animowane menu w jQuery

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

Struktura katalogów

Przed rozpoczęciem jakiegokolwiek projektu z jQuery, musimy najpierw przygotować plik HTML o właściwej strukturze. Utwórz nowe pliki HTML, CSS i JavaScript. W przykładzie każdy z nich ma nazwę animated-menu. Utwórz również w katalogu głównym dwa foldery, odpowiednio na zdjęcia i skrypty. Na rysunku widać zrzut ekranu struktury mojego katalogu głównego.

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.

Dyskusja

Twój adres e-mail nie zostanie opublikowany.