[JS]滑らかにスライドするナビゲーションを実装するチュートリアル

Post on:2009年7月30日

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</textarea>

スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	});
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});
});
</textarea>