サイドバーのメニューをクリックして内容を表示する（開閉）

★　サイドバーのメニューをクリックして内容を表示する（開閉）

●　概要

①　サイドバーメニュー項目をクリックするとその項目の内容が表示されます。
②　ジュゲムブログの下記サンプルブログのヘッダー下のイメージです。
http://sample136.jugem.jp/
③　私のブログの下記記事の改良版です。
http://ameblo.jp/new-blue-777/entry-11181295367.html

●　機能・条件

①　サイドバーのＰＲやＰＲ下のアメーバ広告は対象外です。
　　（広告の非表示は規約違反になる可能性があるため）
②　検索は対象外です。
③　ジュゲムブログの②のサンプルでは、メニュー内容が開いた
　　状態で、全体をクリックすると閉じますが、この記事で紹介
　　しているものでは閉じません。

●　やり方

①　フリープラグインへ追記する

<div class="head_side">

 | <a href="javascript:void(0)" onclick="side_pop(0);">CALENDAR</a>

 | <a href="javascript:void(0)" onclick="side_pop(1);">PROFILE</a>

 | <a href="javascript:void(0)" onclick="side_pop(2);">THEME</a>

 | <a href="javascript:void(0)" onclick="side_pop(3);">ARCHIVE</a>

 | <a href="javascript:void(0)" onclick="side_pop(4);">RANKING</a>

 | <a href="javascript:void(0)" onclick="side_pop(5);">READER</a>

 | <a href="javascript:void(0)" onclick="side_pop(6);">FAVORITE</a>

 | <a href="javascript:void(0)" onclick="side_pop(7);">BOOKMARK</a>

 | <a href="javascript:void(0)" onclick="side_pop(8);">COMMENT</a>

 | <a href="javascript:void(0)" onclick="side_pop(9);">ENTRIES</a>

 |

</div>

◆　説明

　・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

　・　下記が既に設定されていれば、不要です。

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>

　・　side_pop(0);の　0　は下記の　.calendarMenu の位置を表します。

var s_name = new Array(".calendarMenu",".profileMenu",".themeMenu",".archiveMenu",".rankingMenu",".readerMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".recentEntriesMenu",);

side_pop(0)　・・・　".calendarMenu" ・・・・・カレンダー
side_pop(1)　・・・　".profileMenu"・・・・・・プロフィール
side_pop(2)　・・・　".themeMenu"・・・・・・・テーマ一覧
side_pop(3)　・・・　".archiveMenu"・・・・・・アーカイブス
side_pop(4)　・・・　".rankingMenu"・・・・・・ランキング
side_pop(5)　・・・　".readerMenu" ・・・・・・読者一覧
side_pop(6)　・・・　".favoriteMenu" ・・・・・お気に入り
side_pop(7)　・・・　".bookmarkMenu" ・・・・・ブックマーク
side_pop(8)　・・・　".recentCommentMenu"・・・コメント一覧
side_pop(9)　・・・　".recentEntriesMenu"・・・最新の記事

　・　var side_array = new Array(1,1,1,1,1,1,1,1,1,1);

　　開閉するかどうかを指定します。

　　0・・・使用しない（開閉しない）
　　1・・・使用する（開閉する）

　　下記に書かれている順番に対応して指定します。
　　最初は、カレンダーです。

var s_name = new Array(".calendarMenu",".profileMenu",".themeMenu",".archiveMenu",".rankingMenu",".readerMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".recentEntriesMenu",);

1番目・・・".calendarMenu" ・・・・・カレンダー
2番目・・・".profileMenu"・・・・・・プロフィール
3番目・・・".themeMenu"・・・・・・・テーマ一覧
4番目・・・".archiveMenu"・・・・・・アーカイブス
5番目・・・".rankingMenu"・・・・・・ランキング
6番目・・・".readerMenu" ・・・・・・読者一覧
7番目・・・".favoriteMenu" ・・・・・お気に入り
8番目・・・".bookmarkMenu" ・・・・・ブックマーク
9番目・・・".recentCommentMenu"・・・コメント一覧
10番目・・ ".recentEntriesMenu"・・・最新の記事

②　ＣＳＳへ下記を追加します。
　　不要な行（開閉しないものの行）は削除してください
　　もし、最新の記事を消す場合は、その前の行にある　, は消してください。
　　位置などは調整してください。

/* ------------------------------------------------------- */
/* 絶対配置起点を設定　画面の大きさを変えて同じ位置に　　　*/
/* ------------------------------------------------------- */
.skinFrame2{
width:980px; /* コンテンツ幅を設定 */
margin:auto; /* 自動中央寄せ */
position:relative; /* 起点指定 */
}
/* ------------------------------------------------- */
/* ■ サイドバー開閉用ＣＳＳ　　　　　　　　　　　　 */
/* ------------------------------------------------- */
/* 各項目を非表示不要な行は消してください */
.calendarMenu .disp_Class{ display:none !important;}/* カレンダー */
.profileMenu .disp_Class{ display:none !important;}/* プロフィール */
.themeMenu .disp_Class{ display:none !important;}/* テーマ一覧 */
.archiveMenu .disp_Class{ display:none !important;}/* アーカイブス */
.rankingMenu .disp_Class{ display:none !important;}/* ランキング */
.readerMenu .disp_Class{ display:none !important;}/* 読者一覧 */
.favoriteMenu .disp_Class{ display:none !important;}/* お気に入り */
.bookmarkMenu .disp_Class{ display:none !important;}/* ブックマーク */
.recentCommentMenu .disp_Class{ display:none !important;}/* コメント一覧 */
.recentEntriesMenu .disp_Class{ display:none !important;}/* 最新の記事 */
/* ------------------------------------------------- */
/* 各項目を絶対配置不要なものは消してください　*/
.calendarMenu, /* カレンダー */
.profileMenu, /* プロフィール */
.themeMenu, /* テーマ一覧 */
.archiveMenu, /* アーカイブス */
.rankingMenu, /* ランキング */
.readerMenu, /* 読者一覧 */
.favoriteMenu, /* お気に入り */
.bookmarkMenu, /* ブックマーク */
.recentCommentMenu, /* コメント一覧 */
.recentEntriesMenu /* 最新の記事 */
{
position:static;/* 絶対配置指定 */
width:220px; /* 横幅の指定 */
text-align:center;
}
/* ------------------------------------------------- */
/* 各項目を相対配置不要なものは消してください　*/
/* 開閉された部分の内容 */
.calendarMenu .skinMenuBody,/* カレンダー */
.profileMenu .skinMenuBody,/* プロフィール */
.themeMenu .skinMenuBody,/* テーマ一覧 */
.archiveMenu .skinMenuBody,/* アーカイブス */
.rankingMenu .skinMenuBody,/* ランキング */
.readerMenu .skinMenuBody,/* 読者一覧 */
.favoriteMenu .skinMenuBody,/* お気に入り */
.bookmarkMenu .skinMenuBody,/* ブックマーク */
.recentCommentMenu .skinMenuBody,/* コメント一覧 */
.recentEntriesMenu .skinMenuBody /* 最新の記事 */
{
position:absolute; /* 絶対配置 */
z-index:9999; /* 優先順位 */
top:10px; /* 開閉した際のコンテンツと開いたパーツの間余白 */
padding:5px; /* 上下に余白 */
width:220px; /* 横幅調整 */
color:#000000; /* 文字色 */
font-size:10px; /* 文字の大きさ */
vertical-align:middle; /* 文字の縦の位置 */
background-color:#ffffff; /* 背景色 */
border:1px solid #000000; /* 枠 */
visibility:hidden !important; /* 表示しない */
}
/* 開閉された部分の位置 */
.calendarMenu .skinMenuBody{left: 87px;}/* カレンダー */
.profileMenu .skinMenuBody{left:145px;}/* プロフィール */
.themeMenu .skinMenuBody{left:205px;}/* テーマ一覧 */
.archiveMenu .skinMenuBody{left:260px;}/* アーカイブス */
.rankingMenu .skinMenuBody{left:325px;}/* ランキング */
.readerMenu .skinMenuBody{left:385px;}/* 読者一覧 */
.favoriteMenu .skinMenuBody{left:445px;}/* お気に入り */
.bookmarkMenu .skinMenuBody{left:510px;}/* ブックマーク */
.recentCommentMenu .skinMenuBody{left:585px;}/* コメント一覧 */
.recentEntriesMenu .skinMenuBody{left:645px;}/* 最新の記事 */
/* ------------------------------------------------- */
/* メニュータイトル削除　不要なものは消してください */
.calendarMenu .skinMenuHeader,/* カレンダー */
.profileMenu .skinMenuHeader,/* プロフィール */
.themeMenu .skinMenuHeader,/* テーマ一覧 */
.archiveMenu .skinMenuHeader,/* アーカイブス */
.rankingMenu .skinMenuHeader,/* ランキング */
.readerMenu .skinMenuHeader,/* 読者一覧 */
.favoriteMenu .skinMenuHeader,/* お気に入り */
.bookmarkMenu .skinMenuHeader,/* ブックマーク */
.recentCommentMenu .skinMenuHeader,/* コメント一覧 */
.recentEntriesMenu .skinMenuHeader /* 最新の記事 */
{
display:none;
}
/* ------------------------------------------------- */
.head_side{/* サイドバーメニュー（位置） */
position:absolute;
top:0px;
left:175px;
width:800px;
z-index:100;
}
.head_side a{/* サイドバーメニュー */
outline:none;/* クリック時に点線を表示しない */
}
/* ------------------------------------------------- */

◆　スクリプトの内容

function side_pop_init(){// サイドバーポップアップ初期処理
$(document).ready(function(){
for (var k=0; k < s_name.length; k++){$(s_name[k] + " .skinMenuBody").css("cssText","visibility:visible !important");}
$(".skinMenuBody").addClass("disp_Class");
});
}
function side_pop(numbers){// サイドバーポップアップ実行
for (var j=0; j < s_name.length; j++){
if(togg_state[j]==1){$(s_name[j] + " .skinMenuBody").toggleClass("disp_Class");togg_state[j]=0;}
else{
if(numbers==j){$(s_name[j] + " .skinMenuBody").toggleClass("disp_Class");togg_state[j]=1;}
}
}
}

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

サイドバーのメニューをクリックして内容を表示する（開閉）