Animowana nawigacja wykorzystująca jQuery i CSS



Niewątpliwie bardzo ważnym elementem każdego serwisu jest jego menu nawigacyjne. Często to ono nadaje właściwy ton stronie, stanowiąc przysłowiową kropkę nad i. Zastosowanie animacji w menu wprowadza element ruchu, który może przełamać statykę reszty strony.

Dzisiaj chciałabym podzielić się z Wami taką techniką wykorzystującą CSS i jQuery.

Zapraszam!

jquery1

ZOBACZ DEMO

KROK 1: Szkielet HTML

Ta część jest bardzo prosta. To jest typowa lista menu z linkami.

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

KROK 2: Styling - CSS

Do każdego elementu listy stosujemy technikę maskowania poprzez overflow:hidden. Spójrz na obrazek poniżej, aby zobaczyć co mam na myśli.

jquery_2

Zauważ, że nie ma podwójnych tagów <span> w kodzie w kroku 1. Będziemy dodawać to później.

ul#topnav {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	float: left; 
	font-size: 1.1em; 
}
ul#topnav li{ 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	float: left; 
	height:40px; 
} 
ul#topnav a, ul#topnav span { 
	padding: 10px 20px; 
	float: left; 
	text-decoration: none; 
	color: #fff; 
	background: url(a_bg.gif) repeat-x; 
	text-transform: uppercase; 
	clear: both; 
	width: 100%; 
	height: 20px; 
	line-height: 20px;
} 
ul#topnav a{ 
	color: #555; 
	background-position: left bottom; 
} 
ul#topnav span{ 
	background-position: left top; 
}

KROK 3: Animacja jQuery

Jak widać poniżej, skopiowaliśmy tagi <span>, a następnie będziemy je animować -40px na górę, aby przesuwać nawigację.

jquery_3

Poniższy skrypt wyjaśnia, które działania są wykonywane.

$ (Document). Ready (function () {

	$("#topnav li").prepend("<span></span>"); 

	$("#topnav li").each(function() { 
		var linkText = $(this).find("a").html(); 
		$(this).find("span").show().html(linkText); 
	}); 

	$("#topnav li").hover(function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "-40" 
		}, 250);
	} , function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "0" 
		}, 250);
	});
});

ZOBACZ DEMO

POWODZENIA! TO BARDZO PROSTA TECHNIKA!

Źródło:

http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/