- ベストアンサー
mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい
javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- morie0000
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
取敢えず２個動くの張りますね HTMLのほうのIDを変えて ヘッド内のスクリプトをもう1セット書く CSSももう1セット書くだけです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Mootools drop down menu</title> <script language="javascript" type="text/javascript" src="mootools-1.2-core.js"></script> <script language="javascript" type="text/javascript" src="mootools-1.2-more.js"></script> <script language="javascript" type="text/javascript"> window.addEvent('domready', function(){ $('drop_down_menu1').getElements('li.menu').each( function( elem ){ var list = elem.getElement('ul.links'); var myFx = new Fx.Slide(list).hide(); elem.addEvents({ 'mouseenter' : function(){ myFx.cancel(); myFx.slideIn(); }, 'mouseleave' : function(){ myFx.cancel(); myFx.slideOut(); } }); }) }); window.addEvent('domready', function(){ $('drop_down_menu2').getElements('li.menu').each( function( elem ){ var list = elem.getElement('ul.links'); var myFx = new Fx.Slide(list).hide(); elem.addEvents({ 'mouseenter' : function(){ myFx.cancel(); myFx.slideIn(); }, 'mouseleave' : function(){ myFx.cancel(); myFx.slideOut(); } }); }) }); </script> <style type="text/css" media="screen"> body { font-family:Arial, Helvetica, sans-serif; } div.header { display:block; position:relative; height:100px; } #menu-container { display:block; position:relative; width:700px; margin:0px auto 0px; font-size:11px; } #drop_down_menu1 { display:block; position:absolute; clear:both; margin:0px; padding:0px; text-align:left; list-style-type:none; text-align:center; width:700px; float:none; left:0px; top:0px; } #drop_down_menu1 li { font-size:12px; font-weight:bold; float:left; color:#11a2db; padding:5px; cursor:pointer; background:#333333; width:150px; } #drop_down_menu1 li ul { margin:0px; padding:0px; list-style-type:none; padding-top:10px; } #drop_down_menu1 li ul li { display:block; float:none; clear:both; } #drop_down_menu1 li ul li a { color:#FFFFFF; font-weight:normal; text-decoration:none; display:block; } #drop_down_menu1 li ul li a:HOVER { text-decoration:underline; color:#CCCCCC; } #drop_down_menu2 { display:block; position:absolute; clear:both; margin:0px; padding:0px; text-align:left; list-style-type:none; text-align:center; width:700px; float:none; left:0px; top:0px; } #drop_down_menu2 li { font-size:12px; font-weight:bold; float:left; color:#11a2db; padding:5px; cursor:pointer; background:#333333; width:150px; } #drop_down_menu2 li ul { margin:0px; padding:0px; list-style-type:none; padding-top:10px; } #drop_down_menu2 li ul li { display:block; float:none; clear:both; } #drop_down_menu2 li ul li a { color:#FFFFFF; font-weight:normal; text-decoration:none; display:block; } #drop_down_menu2 li ul li a:HOVER { text-decoration:underline; color:#CCCCCC; } </style> </head> <body> <div class="header"> <h1>Mootools 1.2 drop down menu example</h1> <div id="menu-container"> <ul id="drop_down_menu1"> <li class="menu">Menu 1 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> <li class="menu">Menu 2 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="menu">Menu 3 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li class="menu">Menu 4 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul> </div> </div> <div class="header"> <h1>Mootools 1.2 drop down menu example</h1> <div id="menu-container"> <ul id="drop_down_menu2"> <li class="menu">Menu 1 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> <li class="menu">Menu 2 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="menu">Menu 3 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li class="menu">Menu 4 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul> </div> </div> </body> </html>
その他の回答 (1)
- yuki4499
- ベストアンサー率62% (10/16)
普通に2個でも3個でもできるみたいだけど・・・ >>（先に読み込ませた方のプルダウンメニューが決まって動作しません） って書いてあるあたりなんかしら上書きしてんじゃないの？ 少なくともその情報だけじゃどこがいけないのかわからない。 jsの箇所は ('drop_down_menu') ('li.menu') ('ul.links') CSSは div.header #menu-container #drop_down_menu を対応するIDに修正すればいいんだよ。 納期とかあるけど中身も分からないようなものを理解もせず使うのは正直どうかと思うな
お礼
お忙しい中回答ありがとうございます！ ご指摘いただいた箇所は、修正したのに動作しなかったのです・・ （説明下手ですみません） 何かしら上書きされているという事までは想像できたのですが、 そこからが私の知識が追いつきませんでした。。 勉強します。ありがとうございました！！
補足
【お礼をひとまず書きましたが…その後の報告】 私もyuki4499さんの考えと同じで、 #menu-containerも変更しないと…と思っていたのが原因だったみたいです！ #menu-containerじゃなくて .menu-containerに書き換えたいところですが… そのへんはもう少しいじってみます。 ありがとうございました☆
お礼
お忙しい中回答ありがとうござます！ とてもご丁寧で感激しました。ありがとうございます。 ご回答いただきましたhtmlでの動作も確認しました！ あっさり動いてる…！！ > 取敢えず２個動くの張りますね > HTMLのほうのIDを変えて > ヘッド内のスクリプトをもう1セット書く > CSSももう1セット書くだけです そうですよね…。 そう思って私もその手順で設置したのですが、、どこかで間違ったのかな。。 その行程は何度も何度も間違っていないか確認したのでまだ謎は解明中です。 でも見当違いな事をしていたワケではなかったのですね！良かったです。 謎が解け次第ご報告させていただきます。 本当にありがとうございます！
補足
【お礼をひとまず書きましたが…その後の報告】 ありがとうございます！ arenani_sorenaniさんの書いていただいたhtmlをよくよく見て 謎が解けました。 私が#menu-containerも#menu-container02、と2つ用意していたのが ダメだったみたいです。 arenani_sorenaniさんのように、 どちらも#menu-containerにしたら問題なく動きました… 同じページに2つ使うのであれば #menu-containerではなく、.menu-containerにしたい所ので… もう少し勉強します◎ しかしスッキリ爽快です。ありがとうございました！