accordion メニュー

見本

Item1
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.
Item2
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.
Item3
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.

HTMLソース


    
Item1

    
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.

    
Item2

    
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.

    
Item3

    
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.

ｃｓｓソース

dl.accordion{
	width:320px;
	margin:0 0 20px;
}
.accordion dt{
	padding:6px 10px 6px;
	background:#444 url(bg.png) repeat-y 100% 0;
	color:#fff;
	margin:0 0 3px;
	font-weight:bold;
	border-radius:8px 0 0 0;
	border-left:2px solid #444;
	border-top:2px solid #444;
}
.accordion dd{
	padding:8px 10px 12px;
	width:298px;
	border-left:2px solid #444;
	background:#eee;
	margin:-3px 0 3px;
}

→→→背景画像ファイル→→.png DL

発展系

Item1
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.
Item2
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.
Item3
some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.

変更点　CSS

/* 閉じた時のスタイルとしてクラスclosedを準備 */
dd.closed{
	display:none;
}

変更点　jQuery

// 閉じるためのクラスを定義し変数class_closedに代入
var class_closed = 'closed'; 

// 全てを閉じる関数をユーザー定義にて作成
function closeAll(){
 // 全てのdtのクラスに 'closed' 追加
    allDt.addClass(class_closed);
 // 全てのddのクラスに 'closed' 追加   
    allDd.addClass(class_closed); 
 //この場合はの変数allDtやallDdは前の行にて宣言し代入した変数を使用
}

// 指定された要素を開く関数をユーザー定義にて作成
function open(dt, dd){
 // dtのクラスから 'closed' 削除
    dt.removeClass(class_closed);
 // ddのクラスから 'closed' 削除
    dd.removeClass(class_closed); 
  //この場合の変数dt,ddは、open関数の引数を設定時に変数宣言されたもの　（）←この中で宣言しています。
  //試しに関数で使われているdt,ddを別名で変更して実行してみてください。
}

//定義した関数を定義したルール通りに使用して実行させています。
closeAll(); // 全て閉じ
open(dt, dd); // クリックされたものを開く

発展系２

eachを使用せず以下のような方法もあります。

HTMLソース

CSSソース

ul.navi {
	width:220px;
	margin:0px;
}

ul.navi, ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

div.category {
	margin-top:5px;
	height: 40px;
	line-height: 40px;
	text-indent:30px;
	background:url("../images/category_plus.gif");
	cursor:pointer;
}

div.open {
	background:url("../images/category_minus.gif");
	color: #fff;
}

ul.menu a{
	display:block;
	height: 35px;
	line-height: 35px;
	color: #164158;
}

ul.menu li{
	background:url("../images/menu.gif");
	text-indent:35px;
}

ul.menu li.rollover{
	background:url("../images/menu_over.gif");
}

a {
	text-decoration:none;
}

jsソース

//最初に入れ子のulを隠します。
$("ul.menu").hide();

$("div.category").click(function(){
//アコーディオンが開いていたときの処理	
    $("ul.menu").slideUp();
    //バックグラウンドのマイナス画像を消します。
    $("div.category").removeClass("open");
//アコーディオンが閉じていたら行う処理
//現在のdisplayプロパティを取得しnoneかどうかを評価
//$("+ul",this)は$(this).next()と同じ使い方。
//現在のオブジェクトの次に書かれているUL要素という書き方ですので、next()メソッドよりは自由度が高いですね
    if($("+ul",this).css("display")=="none"){
        $("+ul",this).slideDown();
        $(this).addClass("open");
    }
});
$("ul.menu li").mouseover(function(){
    $(this).addClass("rollover");
}).mouseout(function(){
    $(this).removeClass("rollover");
});
//背景画像をCSSでクラス定義し、addClassすることによって書き換えてロールオーバーを行っています。

→→→背景画像セット→→.ZIP DL

上へ