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
<制作@アイタス>
カテゴリー別一覧
- 観光施設のWeb戦略 (32)
- Good&New (1)
- 新・営業日報 (10)
- まとめ (1)
- 営業週報 (2)
- 新人視点で再掲 (9)
- 石川校正本舗 (2)
- 歯科医院のWeb戦略 (15)
- 地方自治体のWeb戦略 (30)
- 大学・専門学校のWeb戦略 (32)
- 宿泊施設のWeb戦略 (24)
- 製造業のWeb戦略 (21)
- 採用コーナーの企画 (4)
- ECサイトの施策 (29)
- リアル店舗への集客戦略 (27)
- 不動産会社のWeb戦略 (27)
- 企業WebサイトNG集 (20)
- 予算50万円のWeb戦略 (15)
- 予算300万円のWeb戦略 (11)
- WordPressで企業サイト構築 (30)
- Movable Type活用法 (21)
- 『入力フォーム』を磨き上げろ! (5)
- カラーユニバーサルデザイン (1)
- つくる前にチェック (68)
- Web施策用語集 (1)
- 参考書籍 (28)
- 無料提供資料 (20)
- 札ビル物語(営業日報) (99)
- 今スグ試せるWeb活用研究会 (27)
- 冒険の地図 (7)
- アイタスが学んだこと (31)
- 合流方法(採用について) (39)
- OTHER (11)
- カイゼンのジツエン (16)
- コラボレーション (4)
- 新人スタッフ (30)
- 今日のさっぽろ時計台前 (46)
- 今日の道庁赤レンガ前 (37)
- 達成したこと&ありがとう (12)