Home > スポンサー広告 > Menutitle:親メニュークリックで子メニューを表示させる


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/205-5c214832
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Menutitle:親メニュークリックで子メニューを表示させる

Home > IT Tips > Menutitle:親メニュークリックで子メニューを表示させる


Menutitle:親メニュークリックで子メニューを表示させる

表題の通り、親メニューをクリックすると展開し、子のメニューが表示されるJavaScriptの小技を紹介したいと思います。身近な例で例えると、FC2Blogの管理画面左にある「ホーム」や「コミュニケーション」などを見てもらえればわかるかと思います。
Menutitleのサンプルはこちら
1.js(menutitle.js)をダウンロード manutitle.js ※右クリックで「名前を付けてリンク先を保存」で保存ください
※保存時のエンコードはもちろん「EUC」です

2.保存した「menutitle.js」をアップロード
※「menutitle」は、お好きな名称で構いません

3.<head>~</head> に以下を記述
<script type="text/javascript" src="/file/manutitle.js"></script>
※2.で付けた名前を一致させてください

4.CSSに以下を記述
.menutitle {
        cursor:pointer !important;
        margin-bottom: 5px !important;
        background-color:#ECECFF !important;
        color:#000000 !important;
        width:140px !important;
        padding:2px !important;
        text-align:center !important;
        font-weight:bold !important;
        border:1px solid #000000 !important;
}

.submenu {
        margin-bottom: 0.5em;
}
※カスタマイズ可能ですのでお好みでどうぞ

5.適用させたい記事で以下のような記述をする
<div id="masterdiv">
	<div class="menutitle" onclick="SwitchMenu('sub1')">親カテゴリ</div>
	<span class="submenu" id="sub1">
		- <a href="#">カテゴリ1:日記</a><br>
		- <a href="#">カテゴリ2:IT Tips</a><br>
		- <a href="#">カテゴリ3:PC Tips</a><br>
		- <a href="#">カテゴリ4:FC2 Tips</a>
	</span>
</div>
</pre>
赤文字部分の「sub1」を「sub2」「sub3」・・・として同じように記述していけば、複数の展開型親メニューが作成できます。もちろん、その際には以下の中に収めるようにする必要があります。
<div id="masterdiv">~<div>
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/205-5c214832
Listed below are links to weblogs that reference
Menutitle:親メニュークリックで子メニューを表示させる from TRASH

Home > IT Tips > Menutitle:親メニュークリックで子メニューを表示させる

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。