スライドアニメ効果を備えたナビゲーション「ShiftyNav」
当ページのリンクには広告が含まれています。
スポンサーリンク
スライド・アニメーション効果を備えたナビゲーションが簡単に作成できるjQueryプラグイン「ShiftyNav」を紹介します。
jQueryプラグイン「ShiftyNav」
指定した要素のナビゲーションをクリックすると、該当項目が格好良くスライドイーーン！します。コードも簡単で、要素を指定するだけで簡単にスライド効果を備えたナビゲーションをを作成できます。
スポンサーリンク
デモのナビゲーションにある「項目」をクリックし、スライドアニメーションを確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ShiftyNavのデモでーす。</title>
<style>
body {
margin: 50px 200px;
}
li {
display: inline;
list-style-type: none;
}
a {
display: inline-block;
height: 20px;
width: 100px;
}
div.text {
padding: 20px;
border: 1px solid red;
}
</style>
</head>
</style>
</head>
<body>
<h1>ShiftyNavのデモでーす。</h1>
<div id="nav">
<ul>
<li><a href="#text-1">項目 1</a></li>
<li><a href="#text-2">項目 2</a></li>
<li><a href="#text-3">項目 3</a></li>
</ul>
<div>
<div id="text-1" class="text">
<h2>項目 1</h2>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div id="text-2" class="text">
<h2>項目 2</h2>
<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
</div>
<div id="text-3" class="text">
<h2>項目 3</h2>
<p>ううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.shiftynav.js"></script>
<script type="text/javascript">
$(function() {
$('div#nav').shiftynav();
});
</script>
</body>
</html>
jsファイルのダウンロードはこちらからどうぞ。
» ShiftyNav
スポンサーリンク