- 締切済み
ツリー式メニュー
自分のＨＰ内にツリー式メニュ―（三段）を設置したいんですが、 クリックしていくごとに↓のように表示されるものを 作りたいんです。 ■メニュー ┣■Ａ ┃ ┣■リンク１ ┃ ┣■リンク２ ┣■Ｂ ┃ ┣■リンク３ ┃ ┣■リンク４ ┃ ちなみに■部分は画像を使っています。 二段目までのツリー表示は出来るんですが…。 どなたか分かる方、お願いします。
- gorugo14
- お礼率70% (17/24)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ittochan
- ベストアンサー率64% (2667/4137)
<HTML> <HEAD> <TITLE></TITLE> <style> .hide { display:none } .view { display: } </style> <SCRIPT LANGUAGE=javascript> <!-- function menu_onclick(ev) { var el = event.srcElement.parentElement.children; for(i=0;i<el.length;i++){ if(el[i].tagName=="UL"){ if(el[i].className=="hide") el[i].className="view"; else { hide(el); } } } } function hide(el){ var i; for(i=0;i<el.length;i++){ if(el[i].children.length>1){ var chld = el[i].children; hide(chld) } if(el[i].tagName=="UL") el[i].className="hide"; } } function window_onload() { var menu = document.getElementsByName("menu"); for(i=0;i<menu.length;i++) menu[i].onclick = menu_onclick; } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <p>こういうの作ってみました。<BR>InternetExplorer限定です。</p> <ul><li> <IMG id=top src="samp1.jpg" name=menu>menu-A <ul class=hide><li> <IMG src="samp1.jpg" name=menu>menu-A-A <ul class=hide><li> <IMG src="samp1.jpg"><A href="samp1.htm">link-1</A> </li></ul> <li> <IMG src="samp2.jpg" name=menu>menu-B <ul class=hide><li> <IMG src="samp2.JPG"><A href="samp1.htm">link-2</A> </li></ul> </li></ul> </li></ul> </BODY> </HTML>
お礼
お返事が遅れてしまって、ごめんなさい。 ＨＰ作成は、ホームページビルダーを使っているんですが、 ツリーが上手く表示されませんでした……。 ittochanさんのソースを参考に、自分でも勉強してみます。 ありがとうございました。