カテゴリー: jQuery

先日、ロールオーバーで良いモジュールがあるという話をしましたが、 メニューが下がるプルダウン形式のモジュールは無いか、興味があって探してみました。 CSSやSpryでも同様の機能はありますが、アニメーションするものが希望という制限で探しています。 また、プルダウン形式のモジュールは「アコーディオン」「ドロップダウン」など他の名称が付いてるものもあります。

MenuMatic

見た目の綺麗で使いやすそうなモジュールです。モジュールはコチラからダウンロードできます。http://greengeckodesign.com/projects/menumatic.aspx 導入はさほど難しくありませんが、リンク先の説明を掲載します。

MenuMatic導入方法

• mootools-1.2とMenuMatic_0.67.jsをDL、解凍します。
• HTMLでこれら2つのモジュールを読み込みます。
• ＜script src=”js/mootools-1.2-core-min.js” type=”text/javascript”＞＜/script＞
• ＜script src=”js/MenuMatic_0.67.js” type=”text/javascript”＞＜/script＞
• CSSも読み込み
• ＜link rel=”stylesheet” href=”css/MenuMatic.css” type=”text/css” media=”all” /＞
• HTML内にリストタグ＜ul id=”nav”＞を記述していけばOK。

紹介サイトにはモジュールと説明、サンプルがありますのでよく分かると思います。

ちょっと調べた結果を載せてみます。 Ajaxの台頭でJavaScriptが見直され、ロールオーバーもこちらで設置する人が増えました。 Dreamweaverでロールオーバーの設定を行うことも多いと思いますが、Dreamweaverのスクリプトは長く扱いづらいのが欠点です。 最近ではロールオーバーも外部モジュールとして組み込めるよう開発が進められ、公開されています。私はsmartRollover.jsを使っています（http://css-happylife.com/log/javascript/000157.shtml）すごくシンプルで軽いのですが、画像に_offと_onを追加しないと使えないためFireworksを使う場合大きな弱点がありました（使えるようカスタマイズしている人はいましたが）。 そこで色々調べてみると、jquery_auto.jsというのを見つけました。こちらはjQueryと組み合わせて使います。メリットは上記弱点がない部分。デメリットはjQueryを使うため読み込みにほんの少し時間が掛かる、コンフリクトする可能性がある、などです。ちなみにjQueryはここに日本語解説（http://semooh.jp/jquery/）があります。jquery_auto.jsはサイトに繋がらないので、ここらへんから入手します（http://logic.stepserver.jp/data/archives/579.html） jQuery自体他にも機能があるので、最初から搭載するのであればこちらの方が良いかも知れません。