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

2011/06/09 17:48

このQ&Aのポイント

折りたたみメニューについて教えてください。いろんなサイトを参考にして、ＪａｖａＳｃｒｉｐｔを使った折りたたみメニューを作りました。左右にページを分けて左側のメニューを折りたたみにしたいです。
折りたたみ１をクリックすると項目Ａと項目Ｂが出てきて喜んだのもつかの間、項目Ａをクリックして右側にページが表示されると、開いたはずの項目Ａと項目Ｂが閉じてしまいます。
折りたたみ１を再度クリックするまで閉じないメニューを作るためにはどうすればいいでしょうか。参考になるサイトなどがあれば教えていただけないでしょうか。

miutu
お礼率75% (3/4)

JavaScript
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

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

ベストアンサー

mikemike7
ベストアンサー率87% (97/111)

2011/06/14 19:02 回答No.4

>初心者には難しすぎたのかもと思い始めています。基盤は出来ているのですから、後は実装するだけですね。デモは↓こちらで http://okwave.xrea.jp/jquery/test6797636/ 複数のページに渡って同じ指定をしなければならないので、もし各ページにCSSとJavaScriptを書いているのでしたら、一括されたほうが良いです。 CSSのメニュー部分の指定を全て抜き出し css/menu.css などで保存し、各ページのHTML上で呼び出します。 <link rel="stylesheet" href="css/menu.css" type="text/css"> などのように。同じように、メニュー部分のJavaScriptも抜き出し js/menu.js などで保存し、各ページのHTML上で呼び出します。 <script type="text/javascript" src="/js/menu.js"></script> これで、JS部、またはCSSを書き換えたい場合、cssファイル、またはJSファイル１つを修正すれば良くなり、管理も楽で整理もされます。私でよければ、今現在のHTMLとCSS、JSを提示してくれれば見ますよ。

質問者

お礼 2011/06/14 20:14

なるほど。そういう風に一括するんですね。 cssは別ファイルにしていましたが、javascriptはhtmlの</head>の前に入れるものだと思っていて一括できるなんて知りませんでした。また、<link rel="stylesheet" href="css/menu.css" type="text/css"> はcssを呼び出すためのものだったことが今ごろ分かりました。おかげで少し見えてきた気がします。出来そうな気がしてきましたが、頭が疲れたので、しばらく休憩して再開します。また初歩的なことを投稿するかもしれませんが、その時はよろしくお願いします。ありがとうございました。

その他の回答 (3)

mikemike7
ベストアンサー率87% (97/111)

2011/06/13 19:17 回答No.3

ああ、項目Aをクリックして別ページに移動してもメニューをそのままにしたいということなんですね。簡単にするならクッキーを利用する方法があります。開いた時点でクッキーとしてその情報を送ります。私が提示したソースで実装してみます。私の提示したソースの以下の部分で <script type="text/javascript"></script> 「ここの部分」を以下の記載に書き換えてテストしてみて下さい。 $(function(){ var ckarr = new Array(); var menuck = new Array(); if(document.cookie){ ckarr = document.cookie.split("; "); for( var i = 0; i < ckarr.length; i++ ){ if(ckarr[i].indexOf('menuOpen=') === 0){ menuck = ckarr[i].substr(9,ckarr[i].length).split(":"); break; } } } if(menuck.length){ $("#navi > li").children("ul").each(function(i){ if($.inArray(String(i), menuck) >= 0){ $(this).css("display","block"); } }); } $("ul#navi > li > div").click( function(){ if($("~ ul",this).css("display") == "none"){ $("~ ul",this).css("display","block"); } else{ $("~ ul",this).css("display","none"); } setOpenMenu(); } ); }); function setOpenMenu(){ var arr = new Array(); $("#navi > li").children("ul").each(function(i){ if($(this).css("display") == "block"){ arr.push(i); } }); if(arr.length){ document.cookie="menuOpen="+arr.join(":")+"; path=/; expires=Tue, 31-Dec-2030 23:59:59;"; } else{ document.cookie="menuOpen=; path=/; expires=Tue, 1-Jan-1980 00:00:00;"; } }

質問者

お礼 2011/06/14 18:14

試してみましたが、うまくいきません。。。初心者には難しすぎたのかもと思い始めています。ソースがごちゃごちゃになってしまい、やり直すのに時間がかかりそうです。ご返答が遅くなると思うので、ここで一旦お礼を言わせていただきます。ありがとうございました。

yambejp
ベストアンサー率51% (3827/7415)

2011/06/10 09:46 回答No.2

ポイントとしては、項目Aを押したときにページを再読み込みするかどうかです。再読み込みするのであれば当然新しいページが開かれるのでメニューは閉じるのがただしい解決策としては大きく２とおり (1)ページを再読み込みしない (2)ページを再読み込みするが、メニューの状態をおぼえておく (1)の場合はフレーム技術をつかうか、非同期処理のajaxで処理することになります (2)の場合は一つはクッキー、もうひとつはGETなどのパラメータわたしなどが有効です。

質問者

お礼 2011/06/13 16:53

初心者の私には難しくて意味が分かりませんがご回答いただきありがとうございます。

mikemike7
ベストアンサー率87% (97/111)

2011/06/09 21:25 回答No.1

ある程度仕様がまとまっているなら、試したJavaScriptなり、HTMLなり提示したほうが回答者も楽ですね。あとから、こうしたいとか言われると二度手間になるので。 JQueryで簡単に作ってみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <ul id="navi"> <li> <div>折りたたみ１</div> <ul> <li>項目Ａ</li> <li>項目Ｂ</li> </ul> </li> <li> <div>折りたたみ２</div> <ul> <li>項目Ｃ</li> <li>項目Ｄ</li> </ul> </li> <li> <div>折りたたみ３</div> </li> </ul> </body> </html> リストの中に更にリストを作って中のリストは非表示にしています。折りたたみ枠をクリック時に、中のリストが表示中か、非表示中かでアクションを切り替えています。

質問者

補足 2011/06/13 16:50

おっしゃるとおりです。提示すればよかったと思います。作っていただいたソースで試してみましたが、項目Aに同じページでリンクをつけても、うまくいかず頭が混乱してます。初心者でどのように聞けばいいかも分からないレベルなので、ご迷惑がかからないように、参考になるWEBサイトがあれば、と考えてました。ちなみに私が誰かのサイトを参考にして作ったものは <script Language=javascript>  </script> <body> <div id="sidebar1"> <ul> <li><a href="javascript:void(0)" id="category_1" onclick="show('1');">折りたたみ１</a> <div id="layer_1" style="display: none;position:relative;" class="close"> <ul> <li><a href="minkan.html">項目１</a></li> <li><a href="daitai.html">項目２</a></li> </ul> </div> <li><a href="javascript:void(0)" id="category_2" onclick="show('2');">折りたたみ２</a> <div id="layer_2" style="display: none;position:relative;" class="close"> <ul> <li><a href="#">項目C</a></li> <li><a href="#">項目D</a></li> </ul> </div> </div> </body> こんなふうです。せっかく作っていただいたものを活用できなくて、とても失礼だと思いましたがもし、アドバイスを頂ければうれしいです。