JavaScriptで折りたたみ可能なメニュー

　2008-01-05

　小粋空間さんで紹介されているメニュー折りたたみ方法です。menufolder.jsをダウンロードして各自のサーバーにアップしてください。menufolder.jsは解説に従えば自由にカスタマイズできます。実物は下記のようになります。

メニューのタイトル

ここにプラグインの内容を。
メニューのタイトルをクリックすると
折りたたまれます

　ソースは下記のようになっています。CSSは自由に変更可能です。メニューを複数利用するときは「webooklist」のところを「webooklist2」などに変更し名前がかぶらないようにしてください。なお、開閉はcookieで保存することも可能です。

<script language="JavaScript" type="text/javascript" src="js/menufolder.js" charset="utf-8"></script>

<STYLE type="text/css">
<!--
.sidetitle {
  width : 200px;
    color:#666;
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    margin-top:3px;
    background:#f6f6f6;
    line-height:140%;
    padding:1px 0px;
    text-align:center;

}

/* 折りたたみスクリプト用 */
.sidetitle a.foldmark {
     font-size:9px; 
     padding-right:3px; 
     text-decoration: none; 
     }

/* 折りたたみスクリプト用 */
.sidetitle {
     margin:3px 0px 0px 0px;
     padding: 0px;
}

.sidetitle a {
       width : 200px;
}

/* 通常 */
.sidetitle a:link,
.sidetitle a:visited {
     display: block;
     padding: 0px 1px 1px 1px;
     border: 1px solid #555555; 
     color:#1f4e66; 
     background-color:#f3f3f3; 
     font-family: Verdana, Arial, sans-serif;
     font-size:10px;
     text-decoration: none;
}

/* マウスポイント時 */
.sidetitle A:HOVER {
     padding: 0px 1px 1px 1px;
     border: 1px solid #555555; 
     color:#ffffff; 
     background-color: #5995b3; 
     font-family: Verdana, Arial, sans-serif;
     font-size:10px;
     text-decoration: none;
}


-->
</STYLE>

<div class="sidetitle2" id="webookname">
メニューのタイトル
</div>
<div class="side" id="webooklist">

プラグインの内容
プラグインの内容
プラグインの内容

</div>
<script type="text/javascript">
<!--
FoldNavigation('webook','on',false);
//-->
</script>

カテゴリ：JavaScript トラックバック(0) コメント(0)

JavaScript メニュー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

スポンサーサイト

JavaScriptで折りたたみ可能なメニュー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-