クリックで表示、非表示するメガメニュー

2023/08/15 12:50

fujillinの回答

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/07/04 19:08 回答No.1

＞もっと効率よく出来る方法はあるでしょうか？ご提示の記述法だと、メニューの数が増えていくとスクリプトもその分増えますし、メニューを変更すればスクリプトも変えなければならないので、効率のよい方法はないかというご質問と解釈しました。例示のスクリプトは、ほぼ同じことを行なうのにid等を用いて個別に指定する形式となっているので、ご質問のようなことが起こります。処理内容が同じなので、それをどの要素が対象でも成り立つような考え方に一般化して、コード化すればよろしいかと思います。対象としているメニューの構成には決まりがあるでしょうから、その決まりを利用してクリックされた要素を基準に相対的な要素関係によって処理の内容を記述するようにすれば、メニューの構成が変わらない限り数の増減や項目の入れ替えがあっても、スクリプトは同じままで対応可能とすることができます。ちょっと気になったのは、ご提示の処理だと個別のメニューをクリックするとそのサブメニューが開/閉するようになっていますが、あるメニューを開いたときに他の開いているメニューを閉じることはしなくても良いのでしょうか？（ご提示のメガメニューの参考サイトでは開いているメニューはいつも一つになるように制御されているようです）以下、「開閉するのは子要素のみで、孫・ひ孫要素は関係ないものと限定して良い」場合、つまりメニューの階層が1階層に限定できる場合の具体例ですが… 1）イベントの設定ご提示のソースではHTML内にonclickで記していますが、通常は　$("#topnav > li > a").click(function(){ ～のように設定もスクリプトで行なってしまっていると思います。 jQueryの場合、イベント処理の匿名関数から、クリックの対象要素が「this」で参照できるようになっています。 2）一度に開いている要素を一つとして考えて良いのであれば、全部のメニューを閉じるのは、　$("#topnav div.sub").hide(); で可能ですが、こうするとクリックされた時点の要素の状態がわからなくなってしまうので、先に開閉状態を取得しておいてから全部閉じ、その後、状態に応じて開くことにするなどの方法が考えられます。例えば var elm = $("div.sub:hidden", $(this).parent()); //閉じていた場合のみ取得 $("#topnav div.sub:visible").hide(); //一旦全部非表示（:visibleは無くても可） elm.show(); //最初に閉じていたら表示するとか。 * ご提示のソースでは初期設定でstyle="opacity:0"を設定していますが、上記のhide/showではopacityを操作していませんので、初期設定のまま（見えないまま）になりますのでご注意。また、style="opacity:0"はIE系のブラウザでは通じませんので、こちらもご注意。 3）参考サイトのようにhide/showではなくアニメーション（フェード）効果を付けて表示/非表示を切り替えるのであれば、opacityの設定も必要になります。その場合は、hide()/show()を利用する代わりに、（参考サイトのように）fadeOut()やfadeTo("normal", 1)などをご利用なさるのがよろしいかと。

質問者

お礼 2011/07/07 09:20

返事が遅れて申し訳ありません。詳しい解説ありがとうございます。 jQueryがまだ分からない部分が多く、急いでいたため、長いコードになりましたが、なんとかメニューを作りました。 fujillinさんの解説を参考に、時間がある時に直したいと思います。本当にありがとうございました。

この回答がついた質問に戻る

関連するQ&A

プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
CSSのプルダウンメニュー
menu1とmenu2の挙動について疑問があります。添付画像をご覧ください。 menu2からsub4-1を選択している状態です。この時、menu2の背景色が赤に戻らないのは仕様でしょうか？それとも何か間違っているのでしょうか？背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。
- 締切済み
- CSS
アコーディオン（jquery）クリック後他閉じたい
プログラム初心者のものです。 jQueryを利用したアコーディオンメニューを作成したのですが、現在、クリック後開き、他をクリック後もクリック済みの箇所が開いた状態になっています。＜改善＞クリックしたメニューのみ表示させたいのですがお手数おかけいたします、ご教示いただけますでしょうか。下記にソースを掲載してみます。【javascript】 $(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); 【HTML】 <div id="nav"> <span class="btn1"><a href="#">A</a></span> <ul> <li class="t1"><a href="#">A-1</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-2</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-3</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> </ul> </div> ご教授の程よろしくお願い致します。
- ベストアンサー
- JavaScript
リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。以下がhtmlとcssです。【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、何卒宜しくお願い致します。
- ベストアンサー
- HTML
オンマウスで表示されるテキスト
先ほどhttp://okwave.jp/qa4091921.htmlで質問させて頂いた者です。下記のソースコードをお教え頂いたのですが、初めてページを開いた時に↓の部分がすでに表示されている状態にするには、どうしたらよいのでしょうか？どうぞよろしくお願い致します。ページを開いたときに表示していたい部分 -------------------------------------------- <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> -------------------------------------------- 教えて頂いたソースコード <style> .hide{ display:none; } </style> <script> function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> <ul> <li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li> <li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li> <li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li> <li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li> </ul> <hr> <div> <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> <ul class="hide" id="sub2"> <li>親メニュー2のサブメニュー1 <li>親メニュー2のサブメニュー2 <li>親メニュー2のサブメニュー3 <li>親メニュー2のサブメニュー4 </ul> <ul class="hide" id="sub3"> <li>親メニュー3のサブメニュー1 <li>親メニュー3のサブメニュー2 <li>親メニュー3のサブメニュー3 <li>親メニュー3のサブメニュー4 </ul> <ul class="hide" id="sub4"> <li>親メニュー4のサブメニュー1 <li>親メニュー4のサブメニュー2 <li>親メニュー4のサブメニュー3 <li>親メニュー4のサブメニュー4 </ul> </div>
- ベストアンサー
- JavaScript
サブメニュー表示方法
以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく最初からHOMEのサブメニューを表示しておくには、どのようにしたらよいでしょうか。初心者で、わからず困っています。よろしくお願い致します。 ------------------------------------------------------- <!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=utf-8" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点があり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません）出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の上に重なって表示させたいと思っています。対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
CSS　 IEバグ　リストの後の隙間を消したい
よろしくお願いします。以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
複数トリガーで動作するアコーディオンメニュー
お世話になります。シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。具体的に言うと、通常アコーディオンメニューは、隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、グローバルナビもそのトリガーにしたいということです。グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a>  <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul>  </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div> </div>
- 締切済み
- JavaScript
div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- ベストアンサー
- JavaScript

クリックで表示、非表示するメガメニュー

fujillinの回答

お礼 2011/07/07 09:20

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

クリックで表示、非表示するメガメニュー

fujillinの回答

お礼 2011/07/07 09:20

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録