ツリーメニューでのcookieの使用方法

このQ&Aのポイント
  • JavaScriptを利用し、ツリーメニューを作成していますが、ページ遷移や更新時にツリーメニューが閉じてしまう問題があります。
  • 現在参照しているJavaScriptのページは、http://himajin.moo.jp/menu/menu1.htmlです。
  • PCショップのドスパラのようなツリーメニューにしたいので、作者からの回答が得られないため、他のJavaScriptも試してみたいと考えています。
回答を見る
  • ベストアンサー

ツリーメニューでのcookieの使用方法

いつもお世話になっております。 毎回丁寧なご回答、本当にありがとうございます。 現在、JavaScriptを利用し、ツリーメニューを作成しているのですが、 次のページに行った際や戻った際、更新を押した際に、 先程まで開いていたツリーメニューが、閉じてしまわないように、 cookieを利用し開いた状態に保ちたいと思っております。 一応、参考になるサイトがあり出来たことは出来たのですが、 そちらの方法を利用すると上記の操作を行った際に、 全てのメニューが一瞬開いてしまう現象が起きてしまいます。 一瞬全て開いた後には先程までのメニューはちゃんと記憶され開いた状態です。 今回、この「全てのメニューが一瞬開いてしまう」といのを、 なんとか直したいと思っております。 またその他に、出来る限りのブラウザに対応させたいと思っております。 JavaScriptが有効なブラウザの場合は通常通りのツリーメニュー、 無効な場合は全てが展開された状態のメニュー等。 目標としてはPCショップのドスパラ様のようなツリーメニューにしたいと思っております。 なを、メニュー部は更新の手間等を考え、 SSIを使用しインクルードしており、外部ファイルにしております。 このJavaScriptに限らず、別なJavaScriptでも結構ですので、 具体的なサイトやJavaScript自体をお書き頂けると幸いです。 今回使用したJavaScriptを作成した作者様にも伺っているのですが、 まだ返答は得られておらず、当方でも出来る限り急ぎで対処したいため、 誠に勝手ながらこちらに質問させていただきました。 何卒宜しくお願いいたします。 なお、確認ブラウザはWinXP SP2 & IE6.0とFirefox2.0とNetscape 7.1です。 一応、現在参照しているJavaScriptのページを下記に記載いたします。 http://himajin.moo.jp/menu/menu1.html

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

たとえばメニュー領域をdivで囲み、こんなかんじで調整します。 <html> <head> <style type="text/css"> #menu{ display:none; } </style> <script language=javascript> window.onload=function(){ document.getElementById('menu').style.display="block"; } </script> </head> <body> <div id="menu"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </body> </html>

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>全てのメニューが一瞬開いてしまう現象 そういう場合はメニューのスタイルシートにdisplay:hidden属性を つけておいてwindow.onloadのイベントハンドラで表示しなおしてやれば よいでしょう。

kumanote
質問者

お礼

yambejp様、回答ありがとうございます。 >メニューのスタイルシートにdisplay:hidden属性を つけておいてwindow.onloadのイベントハンドラで表示しなおす とは具体的にどのように記入すればよろしいでしょうか? 初心者なもので何もわからず申し訳ございません。 何卒、宜しくお願いいたします。

関連するQ&A

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー&ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です><

  • 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

    タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか? できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

  • ツリーメニューについて

    フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると 開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8 こちらの05・06・63などを参考にして、 自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか? 以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName) {  tMenu = document.getElementById(tName).style;  if(tMenu.display == 'none') tMenu.display = "block";  else tMenu.display = "none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none">  <li><a href="a.html" target="main">子メニュー</a></li>  <li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」 に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか? JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。

  • メニューのツリーを表示させると、cookieで、開いた状態を保存できる

    メニューのツリーを表示させると、cookieで、開いた状態を保存できるようにしていますが…。 そのようなページを2ページ作っています。 ページAでツリー1を開くと、ページBでもツリー1が開いてしまいます。 ページBで開いたツリー1を閉じると、ページAのツリー1も閉じてしまいます。 この現象、何なんでしょうか? いつからこのような状態なのか、また何故こんなことになってしまったのか、 私には全然分かりません。 どうすればなおりますか?

  • ツリーメニューのアニメーションについて

    こんにちわ。 アニメーションのツリーメニューを自分のサイトで使用したいと考えております。 javascriptを参考に、取り込んでみましたが、FireFoxで動作しません。 どうやら、もともとFireFoxで動作していないようです。 このようなアニメーションのツリーメニューを使用しているサイト、ご存じの方がいましたら教えて頂けないでしょうか? できればIE、FireFox、Opera、Safari で動作するものか ブラウザごとに使うjavascriptを分けているサイトを教えて頂けるとうれしいです。 宜しくお願いします

  • ツリーメニューについて

    私はクリックすると下に文字が出るツリーメニューを使ったのですが クリックすると下に文字が出、かつフレームで二分割した右側に他のページを表示させる方法が知りたいです。 拙い説明で申し訳ありません。 HTMLタグは大体は理解していると思います。javascriptはまだよく分かっていません。 ツリーメニューも付け焼刃で使っています。 なので、参考にできそうなサイト様をお教えいただくか もしくは細かく説明していただけるとありがたいです。 サイトのURL:http://artclub.ojaru.jp/frame.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ファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

  • ツリー型メニューで、小メニューを開いたまま次のページに行きたい。

    ツリー型メニューをナビに使いたいです。 例えば、 ●はじめに  ├サイトについて  ├わたしについて  └会社について ↑このようなメニューを作って、 「はじめに」をクリックすると、 下に「サイトについて」などの小メニューが出てきます。 その後、「サイトについて」をクリックしてページ移動したときに、 メニューが閉じてしまいます。 このツリーが開いたままで移動したいのですが、 どのようにすればよいでしょうか。 ちなみに、このツリーメニューは大量ページに渡って表示するため、 一括で更新できるように、 インラインフレームで読み込んでくるつもりです。 (ほかにわりかたがわからないので・・・) よろしくおねがいします!

  • JavaScriptを利用しツリーメニューを作成していますが、

    JavaScriptを利用しツリーメニューを作成していますが、 ページを飛んで戻ってくるとメニューが閉じてしまいます。 更新を押した場合も同じです。 それを開いた状態に保っておきたいのです。 ちなみにソースは、 <HEAD> <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> <HEAD> と最初に書いておいて、 ツリーメニューを表示させたいところに、 <A href="javaScript:treeMenu('treeMenu1')">○○○</a><br> <DIV id="treeMenu1" style="display:none">  ┣<A href="aaa.html">aaa</A><BR>  ┣<A href="bbb.html">bbb</A><BR>  ┗<A href="ccc.html">ccc</A><BR> </DIV> と書いてます。 どこをどのように変えればよいですか? よろしくお願いします。 また参考にさせて頂いたサイトも一緒に載せておきます。 http://javascript.eweb-design.com/0703_tm.html

  • ツリーメニューでクッキーを使いたいのですが・・

    JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ(別のディレクトリ)に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。 enptybox22さんの http://oshiete.homes.jp/qa3084680.html 回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。 設置URLは http://blove.cc/tes1/ になります。 どうぞよろしくお願いいたします。