[CSS][jQuery] Skaczące, harmonijkowe menu

Po dłuższej przerwie pora na kolejny artykuł dotyczący tworzenia ciekawych efektów za pomocą biblioteki jQuery.
Dzisiaj przedstawię Tobie sposób na osiągnięcie ciekawego efektu rozwijanego menu, które po rozwinięciu będzie skakało przez chwilę jak piłka.

Taki efekt podnosi atrakcyjność strony internetowej i sprawia, że użytkownikowi takiej strony chcę się klikać w dane menu.
By uzyskać ten efekt, najpierw musimy stworzyć odpowiednią strukturę menu w kodzie HTML:

<ul class="kontener">    
    <li class="menu">      
        <ul>
            <li class="glowne"><a href="#" class="harmonia">Jeden</a></li>      	
            <li class="rozwiniecie">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
        </ul>
    </li>      
</ul>

Taka struktura zapewni nam odpowiedni wygląd projektowanego menu. Teraz pora na kod CSS, który określi nam jak ma wyglądać nasze menu.

ul {
	margin: 0;
	padding: 0;
}
ul.kontener {
	width: 300px;
	margin: 0 auto;
	padding: 50px;
}
li {
	list-style: none;
	text-align: left;
}
li.menu {
	padding: 5px 0;
	width: 100%;
}
li.glowne a {
	display: block;
	font-family: Arial, sans-serif;
	font-size: 21px;
	height: 34px;
	overflow: hidden;
	padding: 10px 20px 0;
	position: relative;
	width: 260px;
}
li.glowne a:hover {
	text-decoration: none;
}
li.glowne a.harmonia {
	background: #CC0000; 
	color:#641603;
}
.rozwiniecie {
	display: none;
	padding-top: 5px;
	width: 100%;
}
.rozwiniecie li {
	background-color: #373128;
	border: 1px solid #40392C;
	color: #CCCCCC;
	margin: 5px 0;
	padding: 4px 18px;
}

Kolejnym krokiem jest stworzenie skryptu odpowiedzialnego za naszą animację.
Jako plików pomocniczych dla naszego skryptu potrzebujemy biblioteki jQuery oraz dodatku jQuery.Easing.
Elementy te należy dołączyć do tworzonego pliku HTML w sekcji HEAD.
Wracając do naszego skryptu, to nasz skrypt wygląda następująco:

$(document).ready(function(){
	$.easing.def = "easeOutBounce";
	$('li.glowne a').click(function(e){
		var dropDown = $(this).parent().next();
		$('.rozwiniecie').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
		e.preventDefault();
	})	
});

W ten sposób osiągnęliśmy zamierzony efekt. Demo z tej porady jest dostepne tutaj: skaczące menu - demo.