クリックするとサブメニュー

質問

HPの左側に各ページへのリンクがあるのですが、数が多くなってきて見辛くなっています。
現在の表示は例として書くと
◎四角エリア
(1)赤
(2)青
(3)黄色
◎三角エリア
(1)赤
(2)青
(3)黄色
・・・・・・
見たいな感じです（わかりにくいかもしれませんが）

これを
◎四角エリア
◎三角エリア
のように表示し、四角エリアをクリックしたら、その下にサブメニューとして(1)(2)(3)が表示されるように出来ない物でしょうか？
で、再度四角エリアをクリックしたらサブメニューが消えるみたいに出来ればと思っているのですが・・・

わかりにくい説明で申し訳ありませんが、お力を貸して頂ければ幸いです。

回答No.2

fujillin · ベストアンサー

#1様も回答の、javascriptの例が多いと思われます。
ぐぐればたくさん見つかると思います。

CSSだけでも可能みたい。（ちょっとタイプが違うけど）
http://www.cssplay.co.uk/menus/example_flyout.html

お礼

自分が探していたのとイメージ的にはぴったりですね。

ありがとうございます。

回答No.3

zeff

<script type="text/javascript" language="JavaScript">
<!--
var flag = null;
function Sample(id){
if (flag == id){
document.getElementById(id).style.display = 'none';
flag = null;
}else{
if (flag != null){
document.getElementById(flag).style.display ='none';
}
document.getElementById(id).style.display = 'block';
flag = id;
}
}
// -->
</script>

<div onclick="Sample('shikaku')">◎四角エリア</div>
<div id="shikaku" style="display:none;">
<ul>
<li>(1)赤</li>
<li>(2)青</li>
<li>(3)黄色</li>
</ul>
</div>
<div onclick="Sample('sankaku')">◎三角エリア</div>
<div id="sankaku" style="display:none;">
<ul>
<li>(1)赤</li>
<li>(2)青</li>
<li>(3)黄色</li>
</ul>
</div>

おおまかに書きましたので、
あとは色々いじってみてください。

お礼

わざわざ書き出していただきありがとうございます。

回答No.1

noname#108428

JavaScript等を用いれば、実現できますよ。

階層型メニューなんて呼ばれたりしてます。
調べてみてください。

お礼

階層型メニューって言うんですか。
早速調べてみます。