ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ スイッチ(開閉式)メニュー ]

ドロップダウン・スイッチメニューを試す

一度は試してみたいと思っていたのが、クリックで開閉するスイッチメニューだ。スライドダウンするときに視覚効果を発揮するスクリプトを試してみた。

Mar.22,2005

スイッチメニューはどこまでいじくれる?

いくつか試してみて注意点がある。

ネット中に出回っているスイッチメニュー(Switch Menu)はクロスブラウザ対応に問題があるものも少なくないから、最初にチェックしておくこと。後から落胆することがないように。

JavaScriptを使ったスライドする軌跡を描く演出は視覚的に効果は抜群だし、開閉したときのボタン画像はチェンジしてくれるものはアイデア次第でいろいろ楽しめそうだ。

但し、inline要素で作られているものが殆どで、メニューのコンポーネントを付け加えることには向かない。例えば、テキストの代わりに画像を配置するとか、本ウェブで使っているような<span>を入れ子にしたlist-styleに置き換えるとかが困難だ。

さらにフォントサイズを拡大したときに二行目に回り込むような場合の処理とか、指定範囲をはみ出した場合のoverflowとかは、あれれこれ試してみたが、どうもよろしくない。

ということで、演出の効果の一点に集中してこのスイッチメニューをいじくるんだったら楽しみがいがある。

サンプルで使ったスクリプト

そこでいくつか公開されている中からEric Simmons氏が作ったものをサンプルに選んで、自分流にカスタマイズして右サイドに表示させた。ストーンズロゴは随分前にスライドのサンプルページにも使った。こういうデザインは時間が経っても色褪せない強烈さがとにかく凄いね!

さて、このサンプルのように、この程度のシンプルなメニュー構成であれば抜群の演出だ。Firefox1.5でも正しく表示して動作してくれる。メニュー項目は一行で収めることだけが注意になる。フォントサイズを拡大した場合に二行目にテキストが回り込むと即座に壊れるのでテキストの列は短めに設定すること。後はこんな具合に動くんだということだけしっかり見てもらえればいい。

このスクリプトを試してみたい方は以下リンクよりzipファイルをダウンロードできる。

Reference : jswitch.com

上のリンク先のページを見てもらうと分るけど、デザインを味付けすることで全く別モノに生まれ変わらせることができる。もし、これをメニューに使うなら、沢山のメニュー項目を詰め込むことを考えるよりも、他のメニューと差別化した目的で使うと何よりも効果的だと思う。作者なら特別の入口として使えると考えている。

最後に、実用的な"メニュー"は何がいいかということを考える。演出の派手さはないが、リストタグを使ってCSSで組まれたロールオーバーメニューが視認性も発揮できて最適なのだろう。簡単にコンポーネントを変更できるし、表示を壊す心配もないので気楽に使えるからだ。

縦型ロールオーバー・リストメニューを作る

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。