- ベストアンサー
開閉式ツリー型メニューについて
こちらのサイトの↓ http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=tips_node 開閉式ツリー型メニュー（ロールオーバーあり）を参考にメニューを作ったのですが、 リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。 クリックをしてメニューが開いた状態を保ちながら 次のページにも反映される様にするにはどうしたら良いでしょうか？ ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした； 誰かお願いいたします。
- enptybox22
- お礼率100% (6/6)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ひさしぶりにちょっと気張って書いてみました。 煩雑なためcssとjsファイルを外部化してあります。 ざっと書いたのでちょこちょこ無駄な部分があるかも。 なおulにulを入れ子するときにはliで囲んだほうがプログラム的に なにかと楽です。 ・treemenu.css #hoge ul{ padding:0px; padding-left:20px; } #hoge li{ list-style:none; margin:0px; padding:0px; } ・treemenu.js function setCookie(key,val){ tmp = key+"="+escape(val)+";"; tmp += "expires=Fri, 31-Dec-2030 23:59:59;"; document.cookie = tmp; }; function getCookie(key){ tmp = document.cookie+";"; tmp1 = tmp.indexOf(key,0); if(tmp1 != -1){ tmp = tmp.substring(tmp1,tmp.length); start = tmp.indexOf("=",0); end = tmp.indexOf(";",start); return(unescape(tmp.substring(start+1,end))); } return(""); }; function delCookie(key){ expiredate = new Date(); expiredate.setYear(expiredate.getYear()-1); tmp = key+"=;"; tmp += "expires="+expiredate.toGMTString(); document.cookie = tmp; }; //ここまでがクッキー処理（ほかでも汎用的につかえる） no=0; window.onload=function(){ var ie=(navigator.appName.indexOf("Microsoft") >= 0); var hoge=document.getElementById('hoge'); hoge.setChild=setChild; hoge.setChild(); var ulgroup=hoge.getElementsByTagName('UL'); for(var i=0;i<ulgroup.length;i++){ if(ie) ulgroup[i].style.height=0; ulgroup[i].setChild=setChild; ulgroup[i].setChild(); } } function changeImg(){ var cnode=this.childNodes; for(var i=0;i<cnode.length;i++){ if(cnode[i].nodeName=="IMG"){ cnode[i].src=(this.dispChild==false)?"hide.gif":"show.gif"; } } } function setChild(){ var cnode=this.childNodes; var preobj=new Object; var obj=new Object; for(var i=0;i<cnode.length;i++){ if(cnode[i].nodeName=="LI"){ if(cnode[i].getElementsByTagName('ul').length>0){ var dispFlg= getCookie("ul") & Math.pow(2,no); preobj.no=no++; preobj.dispChild=dispFlg; preobj.child=cnode[i]; preobj.changeImg=changeImg; preobj.innerHTML="<img src='hide.gif'>"+preobj.innerHTML if(preobj.dispChild==false) preobj.child.style.display="none"; else preobj.changeImg(); preobj.onclick=function(){ this.dispChild=(this.dispChild==false)?true:false; if(this.dispChild==false) this.child.style.display="none"; else this.child.style.display=""; this.changeImg(); var ul=getCookie("ul") ^ Math.pow(2,this.no); setCookie("ul",ul); } } preobj=cnode[i]; } } } ・treemenu.htm <html> <head> <title>test</title> <script type="text/javascript" src="treemenu.js"></script> <link rel="stylesheet" type="text/css" href="treemenu.css"> </head> <body> <ul id="hoge"> <li>A</li> <li> <ul> <li>A-1</li> <li> <ul> <li>A-1-1</li> <li>A-1-2</li> <li> <ul> <li>A-1-2-1</li> <li>A-1-2-2</li> <li>A-1-2-3</li> </ul> </li> <li>A-1-3</li> </ul> </li> <li>A-2</li> <li> <ul> <li>A-2-1</li> <li>A-2-2</li> <li>A-2-3</li> </ul> </li> <li>A-3</li> </ul> </li> <li>B</li> <li>C</li> <li> <ul> <li>C-1</li> </ul> </li> <li>D</li> </ul> </body> </html>
その他の回答 (1)
クッキーを利用する。 ジャバではなくジャバスクリプト(全く異なる物) クッキーに「どのメニューを展開しているか」という情報を保持させておきその情報をページ読込時(onLoad)に読み込んで再展開するのが妥当。 この方式だとクッキーが残っていれば再訪問した時に前回の展開状態が残る。
お礼
すいません。 そのクッキーの記述方法が分からなくて困っています。 とんでもないド素人で申し訳ないです。
関連するQ&A
- ロールオーバー時に1pxずらしたい
ボタンを、ロールオーバー時に1pxずらしたいのですが、 やり方がいまいちよく判りません。 下記サイトも見つけたのですが、cssがよく判らないので、 Dreamweaver上で、css以外でする方法はないでしょうか？？ http://f32.aaa.livedoor.jp/~azusa/index.php?t=css&p=317#rollover4
- ベストアンサー
- ホームページ作成ソフト
- CSSプルダウンメニューとjQueryの重なりについて
CSSプルダウンメニューとjQueryの重なりについて 下記サイト http://www.karuizawanet.com/cgi-bin/database/database.cgi?cmd=s&sc=hotel にてCSSプルダウンメニューと Simple jQuery Spy Effect（要素の自動スクロール） http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_scroll を設置していますが、 CSSプルダウンメニューが 要素の自動スクロールの下に隠れてしまい 困っています。 CSSのz-indexを入れてみましたが、改善されません。 どなたかお力添えをお願いいたします。
- ベストアンサー
- AJAX
- アコーディオンメニュー開閉動作
はじめまして。 とある有料テンプレートを使用して会社のHPを作成しています。 使用しているテンプレートにアコーディオンメニューが実装されているのですが その開閉動作について修正したいのですが、Java関連には疎いものでお聞きしたいです。 使用させていただいているテンプレートは「フリー素材屋hoshino」さんの http://www.s-hoshino.com/web/high_002/index.html のテンプレートです。 修正したい箇所は、アコーディオンメニューがページを移動するたびに閉じてしまう点です。 アコーディオンメニューからカテゴリを選んでクリックし、その後移動したページでは その部分のアコーディオンメニューを開いたままにしておきたいです。 そうすることで、現在どのカテゴリーの、どの商品ページを見ているかもっとわかりやすくなりますし、同じカテゴリーのすぐ下のページにも移動しやすく(クリック回数が少なく)できると思います。 多分、jQueryやcookie関連の修正が必要と思いますが、私の方でも、テンプレート配布元でもやり方がわからないので教えていただきたいです。 わかりづらい文面で申し訳ありませんが宜しくお願いします。
- 締切済み
- JavaScript
- Javascriptでのツリーメニュー表示について
Javascriptを利用して、ホームページ上でツリーメニューを表示させようと思っています。 以下のページのサンプルを元にしています。 【解説ページ】http://www.openspc2.org/reibun/javascript/mouse/063/index.html 上記は、１ページ毎に記述するタイプでテキストベースとなっております。 私は、はじめにツリーを展開するボタンをgif画像で作成し、それをクリックした際に画像の下にテキストベースのリンク文字が表示されるようにしたいと考えました。 また、それらは外部のｊｓファイルでの管理をしたいと思います。 まず、下記の構文を外部ｊｓファイルで作成し<head>内でファイルの読み込みを行いました。 【↓clickmenu.js↓】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } 次に、下記のタグの部分も外部ｊｓファイルで読み込みたいと思っています。 <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト<br>～</div>まで この実際のボタン部分も外部ｊｓで読み込みたいと思う理由は、ページ数が非常に多く、メニューの追加や削除を、１つのファイルでどうしても管理したいからです。 フレームを利用せず、Javascriptでも同じ事が可能であることはわかったのですが、タグの部分がうまく外部ファイルにできなくて、表示が真っ白になってしまいます。 document.write('<a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト<br>'); のように、１行ずつ書いているのですが、hrefにjavaScriptを指定すると表示が消えてしまいます。 必ずこの型でというわけではないのですが、何とかうまく外部ファイルでボタン部分を表示させる方法がありませんでしょうか。ご教授願います。
- ベストアンサー
- JavaScript
- 階層式メニューをtableタグ内に
初めてJSPとJavaScriptをいじります。 階層メニューを作りたいのですが、 <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>見出し１</td> <td>見出し２</td> <td>見出し３</td> </tr> <% for(int i = 0; i < 5; i++){ %> <tr> <td colspan="3">▼階層１</td> </tr> <tr> <td colspan="3">▽階層２</td> </tr> <tr> <td>項目１</td> <td>項目２</td> <td>項目３</td> </tr> <% } %> </table> このようなテーブルを作成して、 ▼階層１をクリックしたら▽階層２以下が表示・非表示されるように、 ▽階層２をクリックしたら項目１～項目３が表示・非表示されるようにしたいのです。 http://phpjavascriptroom.com/?t=js&p=tips_node のサイトを参考にしてみましたが、 <div id="open_1" class="child" style="display:none;">をどの位置に入れても階層メニューがうまく動きません。 アイコンは変わるけど下の階層が開閉しなかったり、全く動かなくなったりします。 どうしたらうまく動くようになるのでしょうか？参考になるサイト等ありましたら教えて下さい。
- ベストアンサー
- JavaScript
- メディアプレイヤーの埋め込みタグ
http://f32.aaa.livedoor.jp/~azusa/index.php?t=strm&p=wmv_generator こちらのサイトを参考にメディアプレイヤーを埋め込みましたが、再生リストの名前とファイルのタイトルが表示されてしまいます。 再生部分のみにしたいのですが、どのようにすれば可能でしょうか？ ご教授お願いいたしますm(__)m
- 締切済み
- PHP
- プルダウンメニューを作りたい
javascriptに関して、ほとんど知識がないのですがトップページの メニュー部分を最近よく使われている、プルダウン形式にする様に 依頼されました。 その仕様としては、 オンマウスになったときに、隠されているメニューが表示され、なおかつ ロールオーバーで画像がきりかわり、 マウスオーバーになったときには、また隠れる。 といったものです。いろいろと方法はあるかと思いますが、 <SCRIPT LANGUAGE="JavaScript" SRC="./common/fw_menu.js"></SCRIPT> と、外部ファイルfw_menu.jsを読み込むようにして、fw_menu.jsに は function fwLoadMenus() { if (window.fw_menu_0) return; window.fw_menu_1 = new Menu("root",324,35,"Osaka, MS UI Gothic",12,"","","",""); fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>",""); fw_menu_1.hideOnMouseOut=true; fw_menu_1.writeMenus(); } // fwLoadMenus() と切り替わる画像とそのロールオーバーを記述しました。 結果、オンマウスした時に、指定した座標位置に画像body-btn-pto01.gifはきちんと表示されるのですが、ロールオーバーが作動しません！！ おそらく↑の記述にミスがあると思うのですが、その原因がつかめず朝に なってしまいました。。。。 どなたか、javascriptに詳しいかた、↑の記述の間違いを私に教えて下さい。 どうか、よろしくお願い致します。
- ベストアンサー
- JavaScript
- マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 JSはプログラムを組んだことがなく、悩んでおります。 一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> ～以下省略します～ そしてjavascriptのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ j$(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- GREEのような携帯サイトのデザイン
現在携帯用のホームページを作っているのですが、携帯サイトの『EZ GREE』や『ガールズウォーカー』のような、角丸テーブルで区切ったようなデザインをしたいと考えているのですが、上手くいきません。 下記サイトの「角丸テーブル スタイルシートのみ」のソースをそのまま使ってみたのですが、auで確認すると背景色がついているだけで、角丸になりませんでした。 http://f32.aaa.livedoor.jp/~azusa/index.php?t=css&p=kadomaru softbankでは角丸テーブルで表示されているようです。 根本的にCSSで作っているという考えから間違っているのでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- LGPLを自分のサイトで使う場合です。
初めて投稿させていただきます。 LGPLライセンスについて、色々検索する言葉を変えたりしてずっとネットで調べていたのですが、全てソフトの開発やLGPLライセンスを含んだプログラムの配布、開発などのことばかりで参ってしまい、こちらを利用させていただきました。 LGPLライセンスのwz_tooltip.jsというバルーンツールチップのライブラリ http://www.walterzorn.com/tooltip/tooltip_e.htm http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=balloonjs （JavaScript, DHTML Tooltipsの項目のものです） このライブラリを自分のホームページで使いたいのですが、それは可能なのでしょうか？ テキストにカーソルをあわせると、それの詳細が出るようにしたいだけです。 特にそのライブラリを使って他のプログラムを作ったり、そういうことはしません。というか、できません。。。 メタタグにjsを呼び出して、サイトのレイアウトで使用したいだけです。 wz_tooltip.jsを普通に使いたいだけなのですが、その関係に関しては全く書かれていなかったので、こちらへ質問させていただきました。 そんなこと聞くなんてアホらしいとか思われるかもしれないですが、自分としては使用できるかどうかが分からないので、是非教えていただきたく思っています。 よろしくお願いします。
- ベストアンサー
- その他（ITシステム運用・管理）
お礼
遅くなりまして申し訳ないです。 こんなに丁寧に記述して頂きましてありがとうございます。 これで何とか前に進めそうです。 本当にありがとうございました。