- 締切済み
収納メニューについて教えてください。
以下のような階層構造で収納メニューを作りたいのですが記述の仕方がわかりません。 A ┣A-1 ┣A-1-1 ┣A-1-2 ┣A-2 ┣A-2-1 ┣A-2-2 ┗A-3 ┣A-3-1 ┣A-3-2 最初はAのみが表示されていて、AをクリックするとA-1、A-2、A-3、と表示される。 A-1をクリックするとA-1-1、A-1-2が表示されるようにしたいのです。 実際にハイパーリンクが繋がっているのはA-1-1、A-1-2の最下層の項目だけです。 以下の記述を参考にhtmlをくんでいたのですが、二重の階層構造にする方法がわかりませんでした。 わかる方、どうか教えてください。 <head> <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> </head> <body> <span class="list" onclick="expand(a);" style="cursor:hand;">A</span><div id="a" style="display:none"> ┣<a href="tagu.html" target=_blank><FONT size="2">A-11</FONT></a><br> ┣<a href="tagu.html" target=_blank><FONT size="2">A-2</FONT></a><br> ┗<a href="tagu.html" target=_blank><FONT size="2">A-3</FONT></a> </div> </body>
- sangai
- お礼率0% (0/1)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
まずはメニュー構造を理解することです。 メニューはul、liで組むのがよいとされます。 ulタグの直下にはliしか置けませんので、ちょっと複雑ですが以下のように するとすっきりするでしょう。 javascriptが有効とは限りませんので、メニューは基本は表示状態とし、 javascriptで非表示に換える・・・という以下のような流れがよい かもしれません。 //hoge.htm <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/javascript" src="hoge.js"></script> <ul id="menu"> <li> <div>A</div> <ul> <li> <div>┣A-1</div> <ul> <li>┃┣<a href="#" target="_blank">A-1-1</a></li> <li>┃┗<a href="#" target="_blank">A-1-2</a></li> </ul> </li> <li> <div>┣A-2</div> <ul> <li>┃┣<a href="#" target="_blank">A-2-1</a></li> <li>┃┗<a href="#" target="_blank">A-2-2</a></li> </ul> </li> <li> <div>┗A-3</div> <ul> <li><span class="indent">■</span>┣<a href="#" target="_blank">A-3-1</a></li> <li><span class="indent">■</span>┗<a href="#" target="_blank">A-3-2</a></li> </ul> </li> </ul> </li> </ul> //hoge.css ul#menu, ul#menu ul { margin:0px; padding:0px; list-style:none; } ul#menu span.indent { visibility:hidden; } ul#menu ul.hide{ display:none; } //hoge.js window.onload=function(){ setmenu(); } function setmenu(){ var menu=document.getElementById("menu"); setul(menu); setdiv(menu); } function setdiv(menu){ var tags=menu.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var node=this.nextSibling; while(node){ if(node.nodeName=="UL"){ node.className=node.className==""?"hide":""; } node=node.nextSibling; } } } } function setul(menu){ var tags=menu.getElementsByTagName("ul"); for(var i=0;i<tags.length;i++){ obj=tags[i]; obj.className="hide"; } }
関連するQ&A
- リンクメニュー収納を２つ以上つくりたいのですが
こんにちは。今、ホームページを作っています。javascriptで上手くいかない点があるので、質問させていただきます。回答よろしくお願い致します。 文字をクリックしたら下にメニューが表示されるようにしたく、<head>タグ内に <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> <body>タグ内に <span class="list" onclick="expand(a);" style="cursor:hand;">【項目１】</span><div id="a" style="display:none"> <a href="リンクしたいURL">内容１</a><br> <a href="リンクしたいURL">内容２</a><br> <a href="リンクしたいURL">内容３</a> </div> としています。これが１つだと問題なく表示されるのですが、この下に<span class="list" onclick="expand(a);" style="cursor:hand;">【項目２】</span><div id="a" style="display:none">…など２つ以上続けるとエラーが出てしまい上手く表示されません。 出来れば、 【項目１】 内容１ ←【項目１】をクリックすると表示 内容２ ← 内容３… ← 【項目２】 内容４… ←【項目２】をクリックすると表示 【項目３】 内容５… ←【項目３】をクリックすると表示 ・・・となるようにしたいのですが…。このような場合にはどうしたら良いのでしょうか。どなたかご回答よろしくお願いいたします。
- ベストアンサー
- Java
- ツイスターのブログパーツ貼れない！
ツイスターのブログパーツ貼れない！ gooブログで、 <div align="center"><a href="http://twitter.com/lovemusic" target="_blank"><img src="http://twimg.info/src/?id=lovemusic" width="160" height="240" border="0"></a><br><a href="http://twimg.info/" style="text-decoration:none"><span style="font-size:9pt">Powered by ついめ～じ</span></a></div> と、 ここのサイト http://twimg.info/ つかって生成したけど貼れないのは試用？
- ベストアンサー
- アンケート
- IE6でだけのメニュー収納不具合
お世話になっております。 Javascriptで、「見出しに対するメニュー収納の調整をしておりますが 見出しの文字だけではなく、見出しに指定した箇所全てをクリックして収納／表示が出来るようにしたいと思っています。 そこで以下の通り記載しましたが、IE6でだけ、文字のクリックのみでしか開かないとのお知らせが入りました。 IE6でも、見出しそのものをクリックすると開くようにするには、どのように調整すべきでしょうか。 もしご存知の方がおられましたら、是非ご教授ください！ 宜しくお願い致します。 ■HTML <span class="list" onclick="expand(idhoge);" style="cursor:hand;"><h3>見出し見出し</h3></span> <div id="idhoge" style="display:none"> <ul> <li>しまってあるメニュー</il> <li>しまってあるメニュー</li> </ul> </div> ■CSS h3 { background-image:url(../images/h3_hoge.gif); background-repeat:repeat-x; border:1px solid #CCCCCC; color:#333333; font-size:14px; font-weight:bold; margin:0 0 10px; padding:5px; } ■Javascript <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> HTMLの<span class>を<div class＞に変えてもダメでした。。
- 締切済み
- JavaScript
- ホームページ作成 ツリーメニュー
ホームページビルダー15を使っています。 タグ（ｈｔｍｌ）の位置が無効です。 と構文エラーが出てしまいます。 エラー箇所は、<body> です。 どこを修正すればいいでしょうか？？解決法を教えてください。 初心者ですので、わかりやすく教えていただければ有難いです。 <html> <head> <title>階層メニュー</title> <SCRIPT Language="JavaScript"> <!-- function myMenu(num){ obj=document.all[num].style; flag=obj.display; if(flag=="none"){ obj.display="block" }else{ obj.display="none" } } // --> </SCRIPT> </head> <body> <a href="JavaScript:void(0)" onClick="myMenu('M1');return false">CD</a><br> <span id="M1" style="display:none"> ├<a href="test_page1.html">新品ＣＤ</a><br> └<a href="test_page1.html">中古ＣＤ</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M2');return false">DVD</a><br> <span id="M2" style="display:none"> ├<a href="test_page1.html">メニュー４</a><br> ├<a href="test_page1.html">メニュー５</a><br> └<a href="test_page1.html">メニュー６</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M3');return false">VHS</a><br> <span id="M3" style="display:none"> ├<a href="test_page1.html">メニュー７</a><br> ├<a href="test_page1.html">メニュー８</a><br> └<a href="test_page1.html">メニュー９</a> </span> </body> </html>
- ベストアンサー
- ブログ
- メニューバーを製作しています
今 メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまでコピーや改造で出来ました 解らない事 １ 検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScript・HTML・ｓｃｃ ソースです よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>
- 締切済み
- CSS
- ３階層メニューについての質問です。
元の文字 →あ →Ａ →Ｂ →い →Ｃ →Ｄ 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「Ａ」「Ｂ」が出現。 となるようにしたいのですが、 <HEAD>～</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> <BODY>～</BODY>内↓ <A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br> <DIV id="treeMenu1" style="display:none"> <br> <A style="color :white;" href="javaScript:treeMenu('treeMenu2')"> あ</A><br> <DIV id="treeMenu2" style="display:none"> <A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR> <A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> い</A><br> <DIV id="treeMenu3" style="display:none"> <A style="color : red;" href="＊＊＊">Ｃ</A><BR> <A style="color : red;" href="＊＊＊">Ｄ</A><BR> </DIV> </DIV> </DIV> とすると、 「元の文字」をクリックすると「あ」が出現。 「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。 上記タグを少し変更して「あ」「い」を 同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
- ツリーメニューを２個つづけると
<script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="icon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">GENSUI</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">１</a><br> <a href="b.html" target="right">２</a></ul> ここまでで１つめ。下から２つめ <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="newicon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">ABYSS</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">３</a><br> <a href="b.html" target="right">４</a></ul> こうすると、２つめの【ABYSS】をクリックすると上の【GENSUI】のツリー『１』『２』がでてきます。（GENSUIを押したときと同じ状態になる） どうすればちゃんと【ABYSS】をクリックして『３』『４』がでてくれますか？
- ベストアンサー
- その他（インターネット・Webサービス）
- 折りたたみメニューについて
現在あるサイトを作成中で、メニューに折りたたみ式のものを使っています。いろいろなサイトや書籍を参考に、メニューそのものはきちんと動いているのですが、メニューをクリックするたびに展開したサブメニューがまた閉じてしまい、ページ移動するたびにメニューを展開させるのは使い勝手が悪いなと感じております。 たとえばＡというメニューを展開し、AAAというページへ移動した場合、展開されたＡは展開したままにしたいのですが… なにかヒントでもつかめないかと検索を続けてみましたが、どうしても分からず困っています。 ソースを記述しますので、こう修正すればできるんじゃない？とか、こっちのソースを使ったらできるよ、とかありましたら教えていただけませんでしょうか？ よろしくお願いします。 [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> メニュー１</a><br> <div class="d2" id="mw00" style="display:none;"> ┣メニュー２(メニュー１から展開)<br> ┃┣ 001<br> ┃┣ 004 - 007<br></div> </div>
- ベストアンサー
- JavaScript
- メニューの折りたたみがFirefoxではうまく動かない
いつも親身なアドバイスで助けていただいています。 今回も多分初歩的なミスとは思うのですが、どうにも行き詰ってしまったので助けていただけないでしょうか。 メニューの折りたたみをしたくて、以下のページを参考にhtmlを作成しました。 http://1kb-sozai.com/kowaza/tagu26.html ファイルには以下のように記述しました。 #------------head部分 <script type="text/javascript" language="javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = ""; } else { id.style.display = "none"; } window.event.cancelBubble = true; } // --> </script> #------------body部分 <h4 onclick="expand(db_01);">Discription. (« click)</h4> <div id="db_01" style="display:none" class="dis">解説文。</div> するとIE7では問題なく動いたのですが、Firefox3.05では全く反応しませんでした。 前述の参考にしたサイトはちゃんとFirefoxも動いていたので、明らかに私の記述ミスなのですが、問題点を見つけることができなくて困っています。 どなたかアドバイスをお願いできないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
