ベストアンサー

mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

2010/02/10 12:27

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）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

arenani_sorenani
ベストアンサー率73% (58/79)

2010/02/11 07:26 回答No.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>

質問者

お礼 2010/02/12 23:09

お忙しい中回答ありがとうござます！とてもご丁寧で感激しました。ありがとうございます。ご回答いただきましたhtmlでの動作も確認しました！あっさり動いてる…！！ > 取敢えず２個動くの張りますね > HTMLのほうのIDを変えて > ヘッド内のスクリプトをもう1セット書く > CSSももう1セット書くだけですそうですよね…。そう思って私もその手順で設置したのですが、、どこかで間違ったのかな。。その行程は何度も何度も間違っていないか確認したのでまだ謎は解明中です。でも見当違いな事をしていたワケではなかったのですね！良かったです。謎が解け次第ご報告させていただきます。本当にありがとうございます！

質問者

補足 2010/02/25 19:24

【お礼をひとまず書きましたが…その後の報告】ありがとうございます！ arenani_sorenaniさんの書いていただいたhtmlをよくよく見て謎が解けました。私が#menu-containerも#menu-container02、と2つ用意していたのがダメだったみたいです。 arenani_sorenaniさんのように、どちらも#menu-containerにしたら問題なく動きました… 同じページに2つ使うのであれば #menu-containerではなく、.menu-containerにしたい所ので… もう少し勉強します◎ しかしスッキリ爽快です。ありがとうございました！

その他の回答 (1)

yuki4499
ベストアンサー率62% (10/16)

2010/02/10 14:27 回答No.1

普通に2個でも3個でもできるみたいだけど・・・ >>（先に読み込ませた方のプルダウンメニューが決まって動作しません）って書いてあるあたりなんかしら上書きしてんじゃないの？少なくともその情報だけじゃどこがいけないのかわからない。 jsの箇所は ('drop_down_menu') ('li.menu') ('ul.links') CSSは div.header #menu-container #drop_down_menu を対応するIDに修正すればいいんだよ。納期とかあるけど中身も分からないようなものを理解もせず使うのは正直どうかと思うな

質問者

お礼 2010/02/12 22:54

お忙しい中回答ありがとうございます！ご指摘いただいた箇所は、修正したのに動作しなかったのです・・（説明下手ですみません）何かしら上書きされているという事までは想像できたのですが、そこからが私の知識が追いつきませんでした。。勉強します。ありがとうございました！！

質問者

補足 2010/02/25 19:17

【お礼をひとまず書きましたが…その後の報告】私もyuki4499さんの考えと同じで、 #menu-containerも変更しないと…と思っていたのが原因だったみたいです！ #menu-containerじゃなくて .menu-containerに書き換えたいところですが… そのへんはもう少しいじってみます。ありがとうございました☆

関連するQ&A

innerHTMLでドロップダウンメニューの作り方
CSSだけで作るドロップダウンメニューのHTMLの構造って↓みたいな感じらしいんですが、 <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul　id="submenu"> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> これのサブメニューを配列からinnerHTMLで生成するときに、 var links=""; site[0]={link:'http;www',title:'アマゾン'}; site[1]={link:'http;www',title:'紀伊国屋'}; site[2]={link:'http;www',title:'ヤフーオークション'}; for(var m = 0; m < site.length; m++){ links += '<li><a href=" '+site[m]['link']+' ">'+site[m]['title']+'</a></li>'; } document.getElementById("submenu").innerHTML=links; <html> <body> <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul　id="submenu"> </ul> </li> </ul> </body> </html> で、全く動きません。勉強中の自分には何処がオカシイのかすら分かりません。何処がオカシイか指摘してください。または、もっとスマートに出来る方法がありましたら、ヒントだけでもご提示いただけたら幸いです。よろしくお願いいたします。
- ベストアンサー
- JavaScript
ドロップダウンの残像
どなたか教えていただけないでしょうか。ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。
- ベストアンサー
- HTML
javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使ってドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですがメニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことはできるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div> </div> </body> </html>
- 締切済み
- CSS
ドロップダウンメニューを作るこのCSSどこが変？
お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。ネットでの情報を参考にしながら、書いたソースが以下のものですが、問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }
- ベストアンサー
- CSS
ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlのドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。マウスが乗った時の文字の色も変更できません。昨日から色々やってるのですがどうしても解決できないのでお聞きしました。よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>
- 締切済み
- ホームページ作成ソフト
jQueryでドロップダウンメニューができない
jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですがうまくいきません。締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> ｃｓｓは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ－が表示されず困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
jquery ドロップダウン・メニュー
jquery ドロップダウン・メニュードロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、思うように表示が出来ません。どうしたらいいのか、教えてください。 <script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('li.twitter').click(function() { if ($(this).hasClass('click')) { $(this).removeClass('click'); } else { $('.click').removeClass('click'); $(this).addClass('click'); } }); $('div.drop').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script> <div id="feed"> <ul class="aux"> <li class="rss1"> <a href="http">RSS1</a> </li> <li class="rss2"> <a href="http">RSS2</a> </li> <li class="rss3"> <a href="http">RSS3</a> </li> <li class="twitter"> <a href="#"><span>Twitter</span></a> <div class="drop"> <p><strong>TW1</strong> <a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a> </p> <p> <strong>TW2</strong> <a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a> </p> </div> </li> </ul> </div>
- ベストアンサー
- JavaScript
垂直型のドロップダウンメニューの作成方法について
http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行！」で試す事が出来ます。また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。【ソース】 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第１ ≫</a> <ul> <li><a href="#">第２－１ ≫</a> <ul> <li><a href="#" target="_blank">第２－１－１</a></li> <li><a href="#" target="_blank">第２－１－２</a></li> <li><a href="#" target="_blank">第２－１－３</a></li> <li><a href="#" target="_blank">第２－１－４</a></li> </ul> </li> <li><a href="#">第２－２ ≫</a> <ul> <li><a href="#" target="_blank">第２－２－１</a></li> <li><a href="#" target="_blank">第２－２－２</a></li> <li><a href="#" target="_blank">第２－２－３</a></li> <li><a href="#" target="_blank">第２－２－４</a></li> </ul> </li> <li><a href="#">第２－３ ≫</a> <ul> <li><a href="#" target="_blank">第２－３－１</a></li> <li><a href="#" target="_blank">第２－３－２</a></li> <li><a href="#" target="_blank">第２－３－３</a></li> <li><a href="#" target="_blank">第２－３－４</a></li> </ul> </li> <li><a href="#">第２－４ ≫</a> <ul> <li><a href="#" target="_blank">第２－４－１</a></li> <li><a href="#" target="_blank">第２－４－２</a></li> <li><a href="#" target="_blank">第２－４－３</a></li> <li><a href="#" target="_blank">第２－４－４</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、第一階層(上記ソースの「第１」)をマウスオーバーした際、すべての内容が表示されませんでした。その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。【第二階層(第三階層)の現在のイメージ】第２－１第２－２第２－３第２－４【第二階層(第三階層)のやりたいイメージ】第２－１　第２－２第２－３　第２－４以上、よろしくお願いします。
- ベストアンサー
- JavaScript
CSSのみでのドロップダウンメニューについて
下のサイトを参考にドロップダウンメニューを作成したのですが、ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。）【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。
- 締切済み
- CSS

mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい