prototype.jsでサイドメニュー折りたたみ

サイドメニューを折りたたみ形式に変えたかったので、いろんな方法を探してみましたが、prototype.jsを実装していることもあって簡単にできないものかと思い。試してみたら実行できましたので紹介します。

Prototype JavaScript Framework: Class-style OO, Ajax, and more: http://prototype.conio.net/

画像をクリックすると元に戻ります。

トップページにて最近のコメント・トラックバックを表示していますが、それほど重要性がまだないようなので、非表示にすることにしました。クリックの頻度が薄いコンテンツを折りたたみ表示にすることでトップページを少しすっきりさせることができます。

prototype.js折りたたみ

今回実行する内容は、指定のボックス部分の表示・非表示の切り替えです。例えば以下のようなボックスをワンクリックで表示・非表示できるようにします。

<h5>サイドメニュータイトル</h5>
<div>サイドメニューコンテンツ</div>

今回は、prototype.jsのElementの中のhide並びにtoggleを使って折りたたみメニューを表示します。

今回のカスタマイズでprototype.jsについてprototype.js リファレンス並びにJavaScript リファレンス (ver 4)を参考にさせていただきました。

Element.hide(element)

ページ上のオブジェクトを非表示にする: ページ上のオブジェクトを非表示にするにはElement.hide()を使います。パラメータにはページ上のオブジェクトを指定します。ID名だけでなく$("box1")などオブジェクトを示すものであれば何でも指定することができます。; （引用：prototype.jsリファレンス＞Element＞hide）

このhideを使ってページ読み込み時やリロード時に任意の指定するボックス部分を非表示にします。

JavaScriptのイベントにてonLoadとElement.hide(element)を組み合わせることで任意のボックスを非表示にすることができます。

onLoad

<タグ onLoad = "イベント発生時の処理">
オブジェクト.onload = "イベント発生時の処理": ページや画像などデータの読み込みが完了した時に発生します。

カンマを使って複数のid（ボックス要素の指定）を指定することができます。

Element.toggle(element)

ページ上のオブジェクトの表示状態を切り替える: ページ上のオブジェクトの表示状態を切り替えるにはElement.toggle()を使います。ID名だけでなく$("box1")などオブジェクトを示すものであれば何でも指定することができます。また、カンマで区切って複数の表示状態を切り替えることができます。; （引用：prototype.jsリファレンス＞Element＞toggle）

toggleを使って、クリックされた時に任意のボックスを表示・非表示と切り替えれるようにします。

<script type="text/javascript">
function toggleBox(){
Element.toggle("任意のid");
}
function toggleBox2(){
Element.toggle("任意のid2");
}
</script>

複数ある場合には、いろいろと探してみたのですが方法がわからず、もう一つtoggle（function toggleBox2()）を用意しました。

上記のスクリプトを使って以下のコードのようにすることで、ワンクリックで表示の切り替えができます。以下の場合は、サイドメニュタイトルをクリックすると処理が実行されます。

<h5 onclick="toggleBox()">サイドメニュータイトル</h5>
<div id="任意のid">サイドメニューコンテンツ</div>
<h5 onclick="toggleBox2()">サイドメニュータイトル2</h5>
<div id="任意のid2">サイドメニューコンテンツ2</div>

prototype.js折りたたみ表示コード

上記の内容をまとめてコードにすると以下のようになります。

`<head></head>`の間に追加するスクリプトコード

表示・非表示ブロックの(X)HTMLコード

<h5 onclick="toggleBox()">サイドメニュータイトル</h5>
<div id="任意のid">サイドメニューコンテンツ</div>
<h5 onclick="toggleBox2()">サイドメニュータイトル2</h5>
<div id="任意のid2">サイドメニューコンテンツ2</div>

prototype.js折りたたみ表示導入

Prototype JavaScript Framework: Class-style OO, Ajax, and moreから最新の(V1.4.0)をDLします。
prototype.jsお使いのブログにフォルダにアップロードします。
<head></head>の間に上記のコードを追加する
サイドメニュータイトルブロック要素にonclick="toggleBox()"を追加する
サイドメニューコンテンツブロック要素にid="任意のid"を追加する

以上でprototype.jsを使ってサイドメニューの折りたたみ表示が実行できます。

このブログでの実装例

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript">
window.onload = function hideText(){
Element.hide("box", "box2");
}
function toggleBox(){
Element.toggle("box");
}
function toggleBox2(){
Element.toggle("box2");
}
</script>

サイドメニュータイトル部分は、リンクテキストとして認識されるようにstyle="color:#0000ff;"で表示を変えています。

このブログでは、Ajaxでアコーディオンタブを表現するためにRico・prototype.jsを実装していることもあって、prototype.jsを使いました。後々、Ajax表示のカスタマイズができるように勉強がてら素人ながらに試してみました。紹介している内容でおかしいところがありましたら、教えていただけるとありがたいです。他にもこんな感じで表示できるなどといった方法があれば、コメント・トラックバックお待ちいたしております。今後も更なるカスタマイズができるようにして行きたいと思っています。

その他のjavascriptを使ったサイドメニューの折りたたみ表示

いろんな方がjavascriptでサイドメニューの折りたたみを紹介しています。以下のエントリーも参考にしてみて、自分に合った方法を選んでみてください。

小粋空間: 折りたたみアーカイブ: http://www.koikikukan.com/archives/cat_121.php
ダイズバタケ: サイドバーを折りたたみ式にしてみた: http://www.towofu.net/mt/archives/2005/09/20_00_50.php

prototype.jsでサイドメニュー折りたたみ

prototype.js折りたたみ

Element.hide(element)

onLoad

Element.toggle(element)

prototype.js折りたたみ表示コード

`<head></head>`の間に追加するスクリプトコード

表示・非表示ブロックの(X)HTMLコード

prototype.js折りたたみ表示導入

このブログでの実装例

その他のjavascriptを使ったサイドメニューの折りたたみ表示

カテゴリ:

タグ:

トラックバック(0)

コメントする

カテゴリ

月別アーカイブ

ウェブページ

検索

最近のブログ記事

アイテム

このブログ記事について

prototype.jsでサイドメニュー折りたたみ

prototype.js折りたたみ

Element.hide(element)

onLoad

Element.toggle(element)

prototype.js折りたたみ表示コード

<head></head>の間に追加するスクリプトコード

表示・非表示ブロックの(X)HTMLコード

prototype.js折りたたみ表示導入

このブログでの実装例

その他のjavascriptを使ったサイドメニューの折りたたみ表示

カテゴリ:

タグ:

トラックバック(0)

コメントする

カテゴリ

月別 アーカイブ

ウェブページ

検索

最近のブログ記事

アイテム

タグクラウド

このブログ記事について

`<head></head>`の間に追加するスクリプトコード

月別アーカイブ