Web活用備忘録

メニューに動きをつけるスクリプト

2008 年 11 月 28 日

こんにちは。アイタスの新人?制作Tです。


おおよそ5〜6年ほど前ですが、Flashという「Web上で画像を自由にアニメーションさせる」技術が一般化した当時、「全てがFlashででていて、斬新かつわかりやすい目に見える動きを持つ」Webサイトが爆発的に増殖した時期がありました。

当時は今ほど回線速度が速くなく、PCの処理能力も限られていたため、そういった「重い」サイトはほどなく廃れましたが、「わかりやすい目に見える動き」はそれまでになかったものでした。

たとえばナビゲーションに動きをつけるだけでも、ユーザーは「自分のマウスカーソルは今どこにあるか」がわかりやすくなります。内容が同じなのであれば、操作の少しわかりにくいサイトと、操作がすごくわかりやすいサイトとでは、後者がより継続的に使ってもらえるサイトになるのではないでしょうか。


今回ご紹介するのは「滑らかに動くナビゲーションのスクリプト」です。単純に「マウスのカーソルを合わせると、ボタンの色がぱっと変わる」程度でももちろん構わないのですが、せっかくならナビゲーションに滑らかな演出を加えて、ひと味違う印象に仕立ててはいかがですか?




phatfusion Image menu
写真を大きく使った、Flashライクなサイトにぴったりのメニュースクリプト。mootoolsで動作します。デモのように写真を使って見せるだけでなく、ソリッドカラーで使ってもスタイリッシュに仕上がりそうですね。



Mootools menu with Accordeon and Effects
こちらもmootoolsで動作する、アコーディオンメニューです。マウスがボタンから離れたときの動きが楽しい!



LavaLamp
jQueryで動作する軽量スクリプト。この操作感は「ブロック崩しゲーム」を思わせますね。ページ数の限られているシンプルなナビゲーションには好適です。



jQuery plugin: Accordion
デモページ
こちらもjQueryで動作する、アコーディオンメニュー。記述パターンが豊富なので、これ一つでさまざまなメニューが作れそうです。



Accessible expanding and collapsing menu
デモページ
シンプルな動きのアコーディオンメニュー。華美な動きは必要ない! というときにどうぞ。



ナビゲーションメニューの折りたたみを実現する Javascript
アコーディオンメニューをどうやって作るか、という解説ページです。私は便利なものを見つけたときに、ただ「組み込めば良いやー」ではなく、「どうやって作るのか」を気にするようにしています。

現実問題として「組み込んで取りあえず動かす」ということもままありますが、少しは解析しないとより良い仕組みを思いつくこともできませんからね。



……解析している間、ずっと知恵熱でてますけれども。


参考にしたページ:
13 Awesome Javascript CSS Menus




<制作@アイタス

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

このエントリのキーワード:,

カテゴリー別一覧

 

キーワード

CMS アイタスの取り組み アイタスってなんだす 動画 Web活用 採用 書籍 セミナー・勉強会 Web施策に力を入れたい 新人スタッフ WordPressで企業サイト構築 Webサイト制作会社 実店舗への集客につなげたい ブランディング確立 魅力や特徴をわかりやすく伝えたい 講座 社内勉強会 ビジネスブログ 事業に活かしたい 企画立案