jqueryでかっこいい動きのナビゲーションを実装

デザインを変更したのでこの記事は無意味となってしまいました。。。

このサイトの上部ナビゲーションを設置する方法です。jqueryを使っています。

htmlの設置したい場所に以下のように記述。

<div id="container">
	<ul id="nav">
		<li id="selected"><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">More About My Portfolio</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://●●●.com/js/jquery.spasticNav.js"></script>	
<script type="text/javascript">
$('#nav').spasticNav();
</script>

http://●●●.comの部分は、自分のホームページアドレス。

の間でcssを読み込み。

<link rel="stylesheet" href="http://●●●.com/llnavi/style.css" type="text/css" media="screen" />

http://●●●.comの部分は、自分のホームページアドレス。

その他、デモやオプションなどは、こちらにて解説があります。