|
メニューが多くなるとメニューの数も増えて、全部表示するとページがごちゃごちゃしてしまう。そんな悩みを解消するスクリプトです。クリックするとサブメニューを表示、もう一度クリックするとサブメニューをとじます。サブメニューのリンクは適当に指定してあるのでクリックしてもページは表示されません。
ソースです。
<SCRIPT language="javascript"> ＜＜おまじないです。
function CHMENU(palm){
if (palm.style.display!="none"){
palm.style.display="none";
}
else{
palm.style.display="inline";
}
}
</SCRIPT> ＜＜ここまでおまじないです。
<STYLE type="text/css">
<!--
.type1{
cursor:hand; ＜＜メニュー１の文字の上に来たときにカーソルの形を手の型に変えます。
color:white; ＜＜文字の色です
background-color:black; ＜＜文字の背景色です。
width:150; ＜＜背景色の幅です。
}
-->
</STYLE> |
呼び出す側のソースです。
<PRE><SPAN id="main1" class="type1"
onclick="CHMENU(smunu1)">メニュー１</SPAN>
<SPAN style="display:none;" id="smenu1">┣<A
href="http://www.ccc.com">CCC</A>
┣<A href="http://www.ＸＸＸＸ.com">DDD</A>
┣<A href="http://www.ＸＸＸＸ.com">EEE</A>
┣<A href="http://www.ＸＸＸＸ.com">FFF</A></SPAN></PRE> |
これが、メニュータイトルとサブメニューのセットです。
メニュー１はすきなように変えてください。
smunu1は必ず両方同じ名前になるように注意してください。
リンク先をhttp://から指定します。
┣も■でも○でも好きにしてください。
２つ以上作るときはsmunu1を smunu2という風に順に変えていけばいいわけです。
style="display:none;は、最初にサブメニューを表示しないようにするためのものです。
最初からサブメニューを表示させたい場合はこの部分だけ削除します。
|