Home > blog > サイドメニュー折りたたみ

サイドメニュー折りたたみ

2006-05-26 (金) 15:19
blog
JavaScript | カスタマイズ
Posted by: qozy/unchin

　またまたカスタマイズで今更な感じはやっぱりあるんですが、サイドメニューの折りたたみを出来るようにカスタマイズしました。

　なんか色々なカスタマイズ調べて導入するのもめんどくさかったので、たまたま持っていたテンプレートからJavaScript移設し、タグ挿入しておしまい。意外に簡単でしたね。FC2で前やったときのJavaScriptとはちょっと違うんですけど、ほとんど一緒です。

　ロリポブログはテンプレ内のhtmlが長くなると最後の方が切れちゃうと言う不具合って言いますか、規制数があるのでJavaScripthは外部ファイルにして行いました。

１，外部ファイルを作り、サーバーに保存する。
これ

２，テンプレートの<head></head>内にリンクを記載する

<script type="text/javascript" src="http://あなたのドメイン/oritatami.js"></script>

３，折りたたみを適用する部分にHTMLを追加して書き込む
私のブログのサイドメニュー構成はこんな感じなので以下のようになる。

<div class="sidefree">
<a href="javascript:void(0);" onClick="showHide(’000′);" title="CLICK OPEN/CLOSE" /><h3 class="linktitle">■メニュータイトル■</h3></a>
<div class="linktext" align="center" id="000" style="display: block;">
</div>
</div>

上記のようにあかい部分が新たに挿入した部分。どの部分のクリックしたら動くようにするのかを考えて<a href="javascript:void(0);" onClick="showHide(’000′);" title="CLICK OPEN/CLOSE" />を挿入する(’000′)の部分はid番号を振る、他に開閉する物とidがかぶらないようにする。このidをクリックしたときにどのぶぶんを開閉させるかを記している部分がid="000" style="display: block;"です。idの部分は同じidになるようにしてください。私の場合は番号を振っていますが、半角英数文字で言葉を入れることも可能です、自分の解りやすい様にし、ほかの開閉部分とidがかぶらないようにしてください。

最初から開いておく場合は
id="000" style="display: block;"
最初から閉じておく場合は
id="000" style="display: none;"
と設定してください。

と、言うことでこのブログのサイドにある緑のメニューバー部分をクリックするとメニューが開閉するようになりました。

Comments:0

Trackbacks:0

Trackback URL for this entry: http://blog.planting-field.com/archives/eid418.html/trackback
Listed below are links to weblogs that reference: サイドメニュー折りたたみ from Planting Field Web Log

Home > blog > サイドメニュー折りたたみ

配布物一覧

Counter