プルダウンメニューに動きを与えるJavaScript
Flashのような滑らかなアニメーション｜MenuMatic
このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。
ちなみにサンプルは下記のページ。
→horizontal（水平）のサンプル
→vertical（垂直）のサンプル
メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。
…で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ！JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。
サンプルはこちら。
設定方法ですが、「MenuMatic」からダウンロードすると、「examples」というフォルダの中に、「horizontal（水平）」と「vertical（垂直）」のサンプルが入っています。用途にあせてどちらかを選び、カスタマイズしていくと良いでしょう。
また、このライブラリは「mootools」も利用しているので、あわせてダウンロードし、読み込ませておきます。
→「mootools」のダウンロード
| 固定リンク
コメント
勉強になりました。
ありがとうございます。
投稿： 仕様書作成係 | 2009.01.12 14:49
仕様書作成係さん、コメントありがとうございます。
今後もいろいろと使えそうな物を紹介していきますので、よろしくお願いいたします。
投稿： exyz | 2009.01.12 18:32
とても貴重な情報を掲載していただいてありがとうございます。
今回このサイトにたどり着き、上記「Flashのような滑らかなアニメーション」を使えるよう、トライしてみました。
説明通りに設定して旨くできましたが、一つ変更したいところがあり、お知恵を拝借出来ればと思います。
OS,BROWSER,FUNCTIONと言ったメニューのタイトルの部分をページの左寄りからセンターに変更したいのですがいろいろといじりましたがうんともすんとも言ってくれません。
変更するところがわかりましたら是非教えてください。
よろしくお願いします。
投稿： フナックス | 2009.03.15 14:23
フナックスさん、コメントありがとうございます。
第一階層のメニューにfloat:leftを指定して横並びを実現しています。
ですので、メニュー全体の幅をメニューの数で割った数から左右の余白分40pxを引いた数を、#nav aにwidth: ---px;として追加して下さい。
サンプルで言うと、MenuMatic.cssの27行目付近です。
例えば、メニュー全体が900pxだとして、
メニューが５つだとしたら、
900÷5−40＝140となり、
#nav a{
margin:0;
float:left;
width: 140px;
}
と、記述します。
ただし、文字数が多くて140px超えてしまうメニューがある場合はNGです。
個別に幅を指定する必要があります。
投稿： exyz | 2009.03.15 15:43
フナックスです。休日の中、早速のご返答をありがとうございます。
チェックしてみました。
これは私の求めていた内容ではありませんが、これもアレンジに大切な物と思いました。
私がおこないたい事はURL欄にサンプルでサイトを表記しましたので見ていただくとわかると思いますが、下段の「Menumatic」以下の文字およびねずみ色の背景色の部分はCSSのSTYLE.CSSで#container {
padding:0;
background:#fff;
margin:0 auto;
width: 600px;
}に変更すると出来ます。
私としては下段の部分をセンターにしたのと同様にメニュー部分もセンターに持って行きたいと思っています。
このような変更は可能でしょうか？
愚問で恐縮ですがよろしくお願いします。
投稿： フナックス | 2009.03.15 19:48
フナックスさん、コメントありがとうございます。
そういうことでしたら、
style.cssの#containerに、
position: relative;
を追加して、
#contentに、
position: absolute;
top: 29px;
を追加して
margin-top: 32px;
を削除
さらに、
#nav {
position: absolute;
left: 0px;
top: 0px;
}
と、#navを#contentの下にでも追加してみて下さい。
投稿： exyz | 2009.03.15 21:45
フナックスです。
お忙しい中、私よりの質問に迅速に答えていただきありがとうございます。
かなり私のやりたい事に近づいてきているのですが、ちょこっと違っていますので再度説明いたします。
私としてはこのプルダウンメニューの下段には#contentsとは違う内容を貼り付けたいと考えています。どのサイトでも上段、中断、下段と違う内容になっていると思います。
それ故、このプルダウンメニューのみをセンターに貼り付けたいと考えています。
http://exyz.cocolog-nifty.com/good_sleep/2007/09/javascript_8131.html
貴サイト内の上記ページで公開されている「ドロップダウンメニュー｜DropDownMenu.js」がありますが、これはセンターに貼り付けられています。
これと同様にセンターに貼り付けられる様にしたいと考えています。
また、各メニューのタイトルの幅も出来ればデフォルテと同じようになれればさらに幸いですが、そのような事は可能でしょうか？
何度も質問して恐縮していますが、よろしくお願いします。
私の方で制作したサンプルを掲載しております。
投稿： フナックス | 2009.03.16 11:46
フナックスさん、コメントありがとうございます。
申し訳ございませんが、このブログはサンプルを紹介しているだけですので、そこから先はご自身で勉強するなり調べるなりして下さい。
厳しいコトを言いますが、あなたもご自身でWeb製作のお仕事をされているんですよね。
でしたら、ご自分でソースをいじくり倒して気に入るモノができるまでやってみて下さい。
所詮コンピュータの世界なので、やりたいコトが具体的なら、方法はいくらでも見つかると思います。
できないとしたら、やりたいコトが考えきれていないか勉強不足のどちらかです。
ご健闘ください！
投稿： exyz | 2009.03.16 12:40
フナックスです。
わかりました。
ここまで教えていただきましてありがとうございました。
投稿： フナックス | 2009.03.16 12:58
フナックスです。 お世話になっています。
今回、「プルダウンメニューに動きを与えるJavaScript」を拝見してその魅力を感じましたが何とか貼り付け場所を任意の場所に出来ないかと考え、Good Sleepの管理者さんに迷惑をかけましたが、何とか出来ました。
いろいろな方法があるのでしょうが、私が選択したのは表を作ってその中に入れ込みました。これで右左、上下とどこへでも動かせる様になりました。
いろいろなヒントを頂きましてありがとうございました。
投稿： フナックス | 2009.03.17 08:29