美容・健康・ファッション・インテリア・DVD・お花・ギフト 安全安心のお買い物

町工場ネット トップ  ◇サイトマップ ◇新規登録 ◇プライバシーポリシー ◇相互リンクの方法 ◇問い合わせ

町工場 | 総合 | 美容 | ファッション | インテリア | 家電 | 資格| 食料 | 個人開業 | 書籍 | ギフト | ホビー | CD・DVD

←前ページ トップページ 内容一覧 次ページ→
■ツリー型メニュー

コンテンツが多くなるとメニューの数も増えて、全部表示するとページがごちゃごちゃしてしまう。そんな悩みを解消するスクリプトです。クリックするとサブメニューを表示、もう一度クリックするとサブメニューをとじます。サブメニューのリンクは適当に指定してあるのでクリックしてもページは表示されません。


メニュー1
メニュー2
メニュー3


ソースです。
<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;  <<メニュー1の文字の上に来たときにカーソルの形を手の型に変えます。
color:white; <<文字の色です
background-color:black; <<文字の背景色です。
width:150; <<背景色の幅です。
}
-->
</STYLE>

呼び出す側のソースです。

<PRE><SPAN id="main1" class="type1" onclick="CHMENU(smunu1)">メニュー1</SPAN>
<SPAN style="display:none;" id="smenu1">┣<A href="http://www.ccc.com">CCC</A>
┣<A href="http://www.ddd.com">DDD</A>
┣<A href="http://www.ddd.com">EEE</A>
┣<A href="http://www.ddd.com">FFF</A></SPAN></PRE>

これが、メニュータイトルとサブメニューのセットです。
メニュー1はすきなように変えてください。
smunu1は必ず両方同じ名前になるように注意してください。
リンク先をhttp://から指定します。
┣も■でも○でも好きにしてください。

2つ以上作るときはsmunu1を smunu2という風に順に変えていけばいいわけです。
style="display:none;は、最初にサブメニューを表示しないようにするためのものです。
最初からサブメニューを表示させたい場合はこの部分だけ削除します。
←前ページ トップページ 内容一覧 次ページ→