折りたたみメニューの使い勝手を改善する方法

このQ&Aのポイント
  • 現在作成中のサイトでは、折りたたみ式のメニューを使用しています。
  • メニューをクリックするたびに展開したサブメニューが閉じてしまい、使い勝手が悪いと感じています。
  • メニューを展開したままにする方法や、改善するためのソースコードの修正方法について教えてください。
回答を見る
  • ベストアンサー

折りたたみメニューについて

現在あるサイトを作成中で、メニューに折りたたみ式のものを使っています。いろいろなサイトや書籍を参考に、メニューそのものはきちんと動いているのですが、メニューをクリックするたびに展開したサブメニューがまた閉じてしまい、ページ移動するたびにメニューを展開させるのは使い勝手が悪いなと感じております。 たとえばAというメニューを展開し、AAAというページへ移動した場合、展開されたAは展開したままにしたいのですが… なにかヒントでもつかめないかと検索を続けてみましたが、どうしても分からず困っています。 ソースを記述しますので、こう修正すればできるんじゃない?とか、こっちのソースを使ったらできるよ、とかありましたら教えていただけませんでしょうか? よろしくお願いします。 [Javascript] function oritatami(id,id2){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; if(document.all){ with(document.all(id2)){innerText=(innerText=="▽")?"△":"▽";} } else if(document.getElementById){ with(document.getElementById(id2)){firstChild.nodeValue=(firstChild.nodeValue=="▽")?"△":"▽";} } } [HTML] <a href="URL" onclick="oritatami('mw00','+0');return false"><span id="+0">▽</span> メニュー1</a><br> <div class="d2" id="mw00" style="display:none;"> ┣メニュー2(メニュー1から展開)<br> ┃┣ 001<br> ┃┣ 004 - 007<br></div> </div>

  • ouran
  • お礼率15% (2/13)

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>サイトを再訪問したとき 実際に試していないのでなんですが、 クッキーをdomainをサイトのルートにして、 保存期間を指定しないでおけば、 ブラウザが閉じたときにクッキーは削除されます。

ouran
質問者

お礼

なるほど… そんな方法もあったのですね。 さっそく試してみたいと思います 有難うございました

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

クッキーを使って、メニューの状態を保存しておき、 次のページではクッキーの状態によって表示するようにしたらどうでしょうか

ouran
質問者

補足

BLUEPIXY様、有難うございます。 クッキーを使った方法を紹介したサイトは一つあったのですが、「サイトを再訪問したときに、前回展開した状態で表示されるのではないか?」という点が心配で別の方法を探していました。 最訪問時に中途半端にメニューが展開していると、まるで片付いていない部屋に入ったときのような…みっともない感じがするのです。 一日中検索かけて調べ続けましたが、それらしいサイトも見つかりませんでしたし、やはり無理なのでしょうか…。

関連するQ&A

  • メニューを変えたい

    こんにちは。メニューをつくったのですが、カテゴリーをクリックすると+がマイナスになり、サブカテゴリが現れ、サブカテゴリをクリックすると+に閉じてしまいます。 <script type="text/javascript"><!-- function oritatami(id,id2){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; if(document.all){ with(document.all(id2)){innerText=(innerText=="+")?"-":"+";} } else if(document.getElementById){ with(document.getElementById(id2)){firstChild.nodeValue=(firstChild.nodeValue=="+")?"-":"+";} } } //--></script> これを下記の様に変更したいと思いますのでご教示お願い致します。 ●サブカテゴリをクリックしてもメインのカテゴリは閉じないで、マイナスのままで開いておき、閉じる時は又メインのマイナスのカテゴリをクリックすると全て閉じてプラスに戻る 説明が下手で申し訳ございませんが、理解して下さると助かります。

  • 展開メニューの修正

    展開メニューの修正 をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、 サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか? よろしく御教授ください。

  • javascript 「折りたためるリスト」

    javascript初学者です。 「折りたためるリスト」について、皆さまにお教え頂きたいことがあり投稿しました。 以下のプログラムのような「折りたためるリスト」があると仮定します。「野菜すべて」をクリックすると、「大根、にんじん、レタス」が表示される折りたためるリストです。 通常、折りたたまれたリストを表示した後にリロードすればリストがたたまれてしまいますが、リロードしてもなおリストがたたまれず、「大根、にんじん、レタス」が表示された状態のままにするにはプログラムをどのように改良すればよいでしょうか。 (例:大根とにんじんにチェックを付けた後にリロードすると、リストがたたまれてしまうため何にチェックが付いているのかわからなくなってしまいます。リロードしてもリストが閉じることなく、リストを表示したままにしたい、と一生懸命やっているのですが、私のjavascriptの知識では解決できないのです(涙)。) なにぶんjavascriptが苦手でどうにもお手上げ状態です。 大変お手数をお掛けしますが、どうぞよろしくお願いいたします。 「折りたためるリスト」プログラム ----------------------------------------------------------------------- <html> <body> <input id="all" name="test1" type="checkbox" value="1"><a href="URL" onclick="oritatami('1');return false">野菜すべて</a><br> <div id="1" style="display:none">   <input name="test1" type="checkbox" value="10">大根<br>   <input name="test1" type="checkbox" value="11">にんじん<br>   <input name="test1" type="checkbox" value="11">レタス<br> </div> <script type="text/javascript"> function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } </script> </body> </html> -----------------------------------------------------------------------

  • ツリーメニューの作成

    ツリーメニューの表示ができません。 記述は以下のとおりです (ヘッダー内) メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ) <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 (実際にツリーメニューを表示させる箇所) <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー1<br> ツリー2<br> ツリー3<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のHTMLファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

  • 折りたたみメニュー

    http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ja-sam_ri.htm ↑上記ページ8番目のように、別のメニューをクリックすると閉じる折りたたみメニューを探しています。 画像は使わずに下記ページのようなテキスト式の折りたたみメニューで、ソースも複雑でなく出来るだけ軽い物を探しています。http://www.openspc2.org/reibun/javascript/mouse/005/code.html 1日以上かけて上記条件の折りたたみメニューを探しましたが、どうしても見つかりませんでした。お教えいただけると幸いです。 ちなみに、今現在は以下の折りたたみメニューを使っています。 bodyの中にonclick="doClick()"を記入。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myObj = null; function doClick(){ var strName; var intNo; myObj = window.event.srcElement; if((myObj.id=="")||(myObj==null))return true; intNo=1; strName=myObj.id + "_"+String(intNo); while(document.all.item(strName)!=null){ if(document.all.item(strName).style.display == "none"){ document.all.item(strName).style.display="block"; }else{ document.all.item(strName).style.display="none"; } intNo=intNo+1; strName=myObj.id + "_"+String(intNo); } return true; } //--> </SCRIPT> <SPAN id=menu1 STYLE="cursor:hand;" class="gramenua">メニュー1</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー2</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー3</SPAN>

  • 折たたみメニューの表示・非表示

    JavaScriptで下記のような折りたたみ(階層)メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです(下のふたつの階層についても同じです)。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません(また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません)。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。

  • 擬似フレームでのページ内リンクについて

    擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか? 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- (中略) <body> <div id="PAGETOP"> <div id="HEADER"> (中略) </div> <!--  左メニュー  --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!--  右メイン  --> <div id="MEIN"> <h2 id="abc">ABC</h2> (中略) <h2 id="def">DEF</h2> (中略) </div> <div id="FOOTER"> (中略) </div> </div> </body> 検討よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンメニューでページ内の表示を変える の派生質問

    某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1~3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか? ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ1</option> <option value="item2">ディブ2</option> <option value="item3">ディブ3</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>

  • cssでdisplay:noneを指定した時のプルダウンメニュー

    こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>