ツリーメニューの参考サイト

解決済

質問者：ikazoozaki
質問日時：2007/12/31 14:49
回答数：3件

いつもこちらでお世話になっております。
妊娠9ヶ月を終えようとしているにも関わらず仕事をしております。
どうしても産む前に終わらせなければならない仕事があるのです。
是非、皆様のお力を借りたいと思っております。

JavaScritp、DHTMLの超初心者なのですがツリーメニューを作成しています。以下のサイトを参考にしています。（左側メニュー）
http://www.premama.jp/hyakka/ninshin/mm08.html
2枚の画像（ON,OFF）を使ったツリーメニューを探しているのですがなかなか参考サイトを見つけられず。。。
ここのサイトを参考にしているのですがうまく動作せず、他にもいろいろなサイトを見てみようと探しているのですがなかなか見つからず。もしご存知のサイトがございましたら教えていただけたらと思います。先に進まず、ずっとてこづっております。。。

勉強不足と痛感しております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： NymphLuna
回答日時：2007/12/31 22:50

#1です。

画像の入れ替えが行われるものがお入用でしたのですね。失礼いたしました。
色々と検索してみたのですが、なかなかご希望されているものが見つからず…。
http://www.beasys.co.jp/dev2dev/products/wlworks …
http://www.intra-mart.jp/apilist/v60/page_base/l …
などが当てはまるかなぁ、と思いました。（的外れでしたら大変申し訳ありません）

参考にあげられているサイトさんでは
ww.premama.jp/common/js/localmenu.js（直接リンクは避けます）
の「/*妊娠～」から下に当てはまると思います。
あとはHTMLソースで確認されてみてはどうでしょう。

- 0
- 件

通報する

この回答へのお礼

ご返信ありがとうございます。
貴重なお時間をいただいたうえに、
ご丁寧なご説明で心の底から本当に感謝しております。

皆様のおかげで解決できました！
本当にありがとうございました。

通報する

お礼日時：2008/01/01 21:40

No.3

回答者： arexis
回答日時：2008/01/01 12:37

ボタンが親リストにあるタイプの、1階層ツリーのオープンクローズで良いですか？

参考用の単純なHTML構造のものを書いておきます。

<html><head>
<style type="text/css">
.slist { display:none; }
.m_img { cursor:pointer; }
.flist { cursor:pointer; }
</style>
<script language="javascript">
function byID(_id){
var el;
if(document.getElementById){ return document.getElementById(_id); }
if(document.all){ return document.all(_id); }
}

function OC(num){
if(byID('cont'+num) && byID('menu_img'+num)){
var li = byID('cont'+num).style;

if(li.display != 'block'){//開く
li.display = 'block';
byID('menu_img'+num).src = './on.gif';

}else{//閉じる
li.display = 'none';
byID('menu_img'+num).src = './off.gif';

}
}
}
</script>
</head><body>
<img id="menu_img1" class="m_img" src="off.gif" onclick="OC(1)"><span id="list1" class="flist" onclick="OC(1)">メニュー１</span>
<div id="cont1" class="slist">
アンカーリンクのリスト<br>
アンカーリンクのリスト<br>
</div>

<br>

<img id="menu_img2" class="m_img" src="off.gif" onclick="OC(2)"><span id="list2" class="flist" onclick="OC(2)">メニュー２</span>
<div id="cont2" class="slist">
アンカーリンクのリスト<br>
アンカーリンクのリスト<br>
</div>
</body></html>

各メニューブロック部分の専用数字付部分は。
menu_img1、list1、cont1、OC(1) の4箇所。
ブロックを増やす場合は、新しいブロックには新しい数字を入れる。配列じゃないので連番の必要はないです。
画像だけクリックにしたいなら、list の方のCSSとイベントハンドラを削除。

数字と一致するターゲットがない場合もエラーを返さないようになっています。

- 0
- 件

通報する

この回答へのお礼

通報する

お礼日時：2008/01/01 21:40

No.1

回答者： NymphLuna
回答日時：2007/12/31 15:57

［HIMAJIN-JavaScript］さんの「ツリーメニューII（画像）」はどうでしょうか。

http://himajin.moo.jp/menu/menu6_1.html

- 0
- 件

通報する

この回答へのお礼

早速ご回答していただきありがとうございます。
教えていただいたサイトを拝見してチャレンジしてみたのですが、
1つの画像のやり方なのでてこづっています^^;
希望は・・・
ONボタンクリック⇒子メニューが表示。このときONボタン⇒OFFボタンに切り替わる。
OFFボタンクリック⇒子メニューが非表示。このときOFFボタン⇒ONボタンに切り替わる。
2枚の画像を使用して切り替えたいのですが。そんな希望をかなえてくれるサイトはご存じないでしょうか...（勉強不足ですいません。）
せっかく教えていただいたのに恐縮します。
しかし、とっても勉強になりました！
教えていただき本当にありがとうございますm(_ _)m

通報する

お礼日時：2007/12/31 20:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！