« 7月 2016 12月 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

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

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

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

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

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

  1. 外部ファイルを作り、サーバーに保存する。これ
    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;
       }
    }
  2. テンプレートの<head></head>内にリンクを記載する
    <script type="text/javascript" src="http://あなたのドメイン/oritatami.js"></script>

  3. 折りたたみを適用する部分に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;"
    と設定してください。

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

関連する投稿

1つ星2つ星3つ星4つ星5つ星 (1 投票, 平均値/最大値: 5.00 / 5)
Loading...Loading...

Comments:0

Comment Form
Remember personal info

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 > サイドメニュー折りたたみ

ZenBack
Feeds

 RSSリーダーで購読する

はてなRSSへ追加Google Readerへ追加
Photo
Other-Meta
ブログランキング blogram投票ボタンブログランキング・にほんブログ村へ My Profile by iddy にほんブログ村 サッカーブログ FC東京へ
にほんブログ村
ブログでクチコミ B-Promotion

Return to page top

Get Adobe Flash player
back to top