JavaScriptでサイドメニューの開閉

Tags:

JavaScript

今までは、JavaScriptとCSS（display: block;、display: none;）を利用して、サイドバーのメニューが開閉されるようになっていました。

これですと、JavaScriptはOFF、CSSはONの状態では、メニューが閉じたままになってしまうため、変更しました。（デモページへ）

「プロとして恥ずかしくないJavaScriptの大原則」から、『クリックひとつでサブメニューをON/OFF』より。

以下、Movable Typeで利用する手順です。

JavaScriptをアップロード

http://script.aculo.us/downloads から、scriptaculous-js-1.6.4.zip をダウンロード、解凍します。

ライブラリの「prototype.js」、「scriptaculous.js」、「builder.js」、「effects.js」を任意のディレクトリ（フォルダ）にアップロードします。

Movable Typeでは、「テンプレートを新規作成」でコピペ。出力ファイル名は、それぞれのファイル名で保存し再構築してもOKです。

以下のコードを、「add_toggle.js」というファイル名でアップロードするか、Movable Typeでは「テンプレートを新規作成」で保存し再構築します。

function add_toggle ( elem ){
	var target = elem.id+'_cont';
	Effect.BlindUp( target, { duration: 1.0 } );
	var func = function () {
		Effect.toggle( target, 'blind', { duration: 0.2} );
	};
	Event.observe( elem, 'click', func );
}
function init () {
	var news = $('beta');
	var list = news.getElementsByTagName('h2');
	for( var i=0; i<list.length; i++ ) {
		 add_toggle( list[i] );
	}
}
Event.observe( window, 'load', init );

id+'_cont'で、idに「_cont」がついている要素が開閉されるようになります。

duration: 0.2は、開閉するスピードです。この場合、0.2秒かけて開閉されます。

var newsとvar listで、#betaにあるh2をクリックすると開閉するように指示しています。

テンプレートを変更

head部分

XHTMLファイルの<head>から</head>の間に、アップしたJavaScriptを読み込むための記述をします。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>add_toggle.js"></script>

サイドバー部分

メニューの開閉のためのidを記述します。

<h2 id="news1" class="module-header">最近のエントリー</h2>
<div id="news1_cont" class="module-content">

<h2 id="news2" class="module-header">カテゴリー</h2>
<div id="news2_cont" class="module-content">

<h2 id="news3" class="module-header">アーカイブ</h2>
<div id="news3_cont" class="module-content">

news1、news1_contは、開閉させるメニューの分だけ順番に数字を割り振ります。

CSSの変更

メニューの開閉が分かるように、CSSを変更します。

.module-header {
cursor: pointer;
}

a:hoverのように、マウスポインタが変ります。

* * *

テンプレートを変更したため、2007年3月現在、このJavaScriptは適応されていません.

JavaScriptでサイドメニューの開閉デモページ: » demo/javascript_1.html

追記: March 25, 2007

Posted on October 27, 2006 3:24 PM

Comments

panser:

はじめまして！　この記事を拝見させて頂き大変感動しました。サイドメニューの開閉いい感じですね
そこで突然で申し訳ないのですが、私は小粋空間さんのテンプレートを現在使っているんですけど現在のテンプレートでこの開閉を使いたいのですがもし良ければカスタマイズ方法の詳細をエントリーして頂けないでしょうか？　もし可能であればソースなどをお送りさせて頂きたいと思います。　ご検討宜しくお願いします。　

Posted by panser | November 23, 2006 1:39 AM

Posted on November 23, 2006 01:39

ちの＠小夜鳴鳥:

はじめまして。こんにちは。

申し訳ありませんが、JavaScriptを勉強中の私には、他の方が作成したものを改変するスキルがありません。

小粋空間さんで配布されているテンプレートと、サイドメニューの開閉のJavaScriptをご利用なんですよね。

・JavaScriptはOFF、CSSはONの状態で、メニューが閉じたままにならないようにするには

・開閉のスピードを設定するには

この2点を、配布元の小粋空間さんに直接お尋ねになった方が早いと思います。

お役に立てなくてごめんなさい。

Posted by ちの＠小夜鳴鳥 | November 23, 2006 12:25 PM

Posted on November 23, 2006 12:25

Bloc Notes