« 写真を簡単に加工するJavaScript | トップページ | ロールオーバー時に動きを与えるJavaScript »

2008.12.11

プルダウンメニューに動きを与える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」のダウンロード

|

« 写真を簡単に加工するJavaScript | トップページ | ロールオーバー時に動きを与えるJavaScript »

コメント

勉強になりました。
ありがとうございます。

投稿: 仕様書作成係 | 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だとして、
メニューが5つだとしたら、
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

初めまして。『プルダウンメニューに動きを与えるJavaScript』の水平サンプルを使用させて頂きました。ありがとうございました。ただ、Firefox、Safariで確認するときちんとできているのですが、IE9でチェックしてみると、プルダウン表示が全くされないという現象が起きてしまっています。何か回避策はありませんでしょうか。お返事、お待ちしております。宜しくお願い致します。

投稿: たっくん | 2012.03.11 15:23

たっくんさん、コメントありがとうございます。

申し訳ありませんが、こちらでIE9の環境がなく確認できないため、何とも言えません。
一応、IE8以下では動くのですが…。

また、このサンプル自体結構古い物ですので、修正するよりjQueryなどの新しいスクリプトを探した方が早いかもれません。

取り急ぎ、お役に立てず申し訳ございません。

投稿: exyz | 2012.03.11 19:02

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/43369244

この記事へのトラックバック一覧です: プルダウンメニューに動きを与えるJavaScript:

» JavaScriptでプルダウンメニュー [Good Sleep]
ドロップダウンメニュー|DropDownMenu.js プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript Ajax 実践サンプル集さんのドロッ [続きを読む]

受信: 2008.12.11 22:07

» JavaScriptで階層型プルダウンメニュー [Good Sleep]
Ajaxで作る階層型メニューバー|SpryMenuBar.js 以前、「JavaScriptでプルダウンメニュー(DropDownMenu.js)」という記事をこのブログで紹介しました。するとこの前、 [続きを読む]

受信: 2008.12.11 22:10

« 写真を簡単に加工するJavaScript | トップページ | ロールオーバー時に動きを与えるJavaScript »