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

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

2006-05-26 (金) 15:19
blog
ネット制作
Posted by: qozy/unchin

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

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

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

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

if(document.getElementById){
	document.writeln('<style type="text/css" media="all">');
	document.writeln('<!--');
	document.writeln('.sidehide{display:none;}');
	document.writeln('-->');
	document.writeln('</style>');
}

function showHide(id){
	var disp = document.getElementById(id).style.display;

	if(disp == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block";
	}
	return false;
}

function showHide2(id){
	var disp = document.getElementById(id).style.display;

	if(disp == "none"){
		document.getElementById(id).style.display = "block";
	}else{
		document.getElementById(id).style.display = "none";
	}
	return false;
}
var scrj = 1;
function softScrollBack() {
   if(navigator.appName == "Microsoft Internet Explorer" && document.compatMode == "CSS1Compat") {
      var scdist = document.body.parentNode.scrollTop;
   } else {
      var scdist = document.body.scrollTop;
   }
   if(scrj<50 && scdist) {
      scdist = (scdist>2) ? Math.ceil(scdist*.2) : 1;
      scrj++;
      scrollBy(0,-scdist);
      setTimeout("softScrollBack()",20);
   } else {
      scrollTo(0,0);
      scrj = 1;
   }
}

テンプレートの<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 > サイドメニュー折りたたみ