«なんで??サーバーの容量がいっぱい、意外とメタボなログファイル｜ メイン ｜写真を簡単に繋げてパノラマ写真を作れるICEを試してみた»
2008年09月30日
mootoolsでエフェクト付きのメニュー『Fancy Navigation』を実装
mootools.jsを使用したFancyなNavigationをご紹介。
その名もFancy Navigation with MooTools Javascriptッ！グラデーション効果っぽいものがつけられます。
まずはサンプルをご覧ください。←マウスホイールでクリックすると別窓で開きます。
オーバーレイする見せ方のshadowbox.jsの説明はこちら。
それでは以下に詳しいスクリプトの説明を書いていきます。
ちなみに本家はコチラ。
Fancy Navigationの特徴
試してみて感じたFancy Navigationの特徴です。
- mootools.js(Ver1.2)と簡単なScriptを書くだけで導入できる。
- 色の指定だけなので軽い！（多分）
- サイトのカラーを選ばない。
- マークアップに無理が無く綺麗なHTMLが保てる
などが挙げられます。
特に1番は他のライブラリを読み込む必要が無いので、お手軽です。
逆に少し残念な点もあります。
- IE6で動作するがエフェクトが汚い・・・
ここは残念ですが、それでもまぁ綺麗です。
いろいろなブラウザで検証してみてください。
Fancy Navigationの導入方法
導入は物凄い簡単です。
1.mootools.js(Ver1.2)を読み込みScriptを記述する
現在最新のmootools.js（Ver1.2）をheader部分で読み込みます。
<script type="text/javascript" src="moo1.2.js"></script>
それから下記Scriptを記述してあげます。
<script type="text/javascript">
window.addEvent('domready', function() {
$each($$('a.nav'),function(el) {
el.addEvent('mouseenter', function() {
el.highlight(el.getStyle('background-color'),'#333');
/*マウスオーバー時一cssのactiveの次イベントで呼ばれて来る色（#333）*/
});
el.addEvent('mouseleave', function() {
el.highlight(el.getStyle('background-color'),'#000');
/*マウスが離れた時一この色まで変化していってcssでの指定に戻る（#000）*/
});
});
});
</script>
2.（X）HTML/CSSを記述する
Scriptの記述が完了したら次にCSSを追加します。
#navi a:hover,#navi a:active {
color:#000;
background:#EEE;
/*マウスオーバー時一番最初の色（#eee）*/
}
#navi .nav {/*Script3行目と同じClass名*/
background:#000;
color:#ddd;
display:block;
width:180px;
height:50px;
line-height:50px;
padding-left:20px;
}
大事な部分はコメントアウトの箇所ですね。
そして（X）HTMLは
<ul id="navi"> <li><a href="" class="nav">naviA</a></li> <li><a href="" class="nav">Nav Item 2</a></li> <li><a href="" class="nav">Nav Item 3</a></li> <li><a href="" class="nav">Nav Item 4</a></li> <li><a href="" class="nav">Nav Item 5</a></li> </ul>
とシンプルなマークアップで完成です。
色違いとか横並びとか
サンプルのように色の変更や横に並び替えるといった変化も、CSSの変更だけで可能です。
サンプルのソースを表示する
（追記 ↑この記述はブラウザFireFoxのみで正常に動作します。）
また同ページ内に2箇所設置する事も可能です。
使い方次第で色々広がるので色々試してみてください～。
08/10/08追記
MooToolsを30日でマスターするチュートリアルを試す！【1日目】という記事書きましたので合わせてよろしくお願いします。
Posted by ; k. 2008年09月30日 01:32
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
コメント
下から三行目辺りの「サンプルのソースを表示する」のリンク先が...
それはさておき、お久しぶりです。
これはいいですね、機会があったら試してみたいと思います。RSS吐いてたら必ず見に来ているので、これからも有用な記事をたくさん書いてくださいー
では。
Posted by ; uk+ ：2008年09月30日 10:45
>uk+ さん
コメントありがとうございます！
おひさしぶりです。
リンク先は良く分かっていないまま使ってました＞＜
追記しときました。
これからも何となく有用な記事書いていくつもりなんで暖かく見守ってやってください。
Markup weblog || 19D の更新も楽しみにしています～。
Posted by ; caraldo_k ：2008年10月05日 19:19
