http://www.laforme.jp
【La forme】ガラスアクセサリーショップ ラフォルム
高級輸入ガラスを素材としたオリジナルアクセサリーの制作販売と委託作品の販売。
CodeR-株式会社ウフルのコーダーブログ-デモ用ページ
jQueryで超簡単アコーディオン2
IE以外はグラデーションも入っています。
（青：通常のリンク、黄：アコーディオン、ピンク：アコーディオン選択中）
共通設定
HTML
<ul class="accordion">
<li><a href="#" title="これは普通のナビゲーション">Home(これは普通のナビゲーション)</a></li>
<li>
<div class="accordion_head ここにクラス名" title="これはアコーディオン">Company(これはアコーディオン)</div>
<ul>
<li><a href="http://uhuru.co.jp/company/" target="_blank">Company Top</a></li>
<li><a href="http://uhuru.co.jp/company/access/" target="_blank">Access</a></li>
</ul>
</li>
<!--以下略-->
</ul>
CSS
.accordion .accordion_head {cursor:pointer;}
デモ用の装飾例CSSは以下。
/* ----------------------------------------
common
---------------------------------------- */
#contents ul.accordion {
height:350px;
overflow:hidden;
}
#contents ul.accordion,
#contents ul.accordion > li {
width:230px;
font-size:12px;
}
#contents ul.accordion > li > a,
#contents ul.accordion > li > .accordion_head {
display:block;
width:220px;
padding:5px;
background:#bcbcbc;
background: -webkit-gradient(linear, left center, right center, from(#b6b6b6),to(#c3c3c3));/* webkit */
background: -webkit-linear-gradient(left,#b6b6b6, #c3c3c3);/* webkit */
background: -moz-linear-gradient(left,#b6b6b6, #c3c3c3);/* fx */
background: -o-linear-gradient(left,#b6b6b6, #c3c3c3);/* opera */
background: linear-gradient(left,#b6b6b6, #c3c3c3);
border-top:solid 1px #cfcfcf;
border-bottom:solid 1px #aeaeae;
color:#454545;
}
#contents ul.accordion a {
text-decoration:none;
}
#contents ul.accordion > li > a:hover {
background:#06b1b3;
background: -webkit-gradient(linear, left, right, from(#05a9ab),to(#08b9bb));/* webkit */
background: -webkit-linear-gradient(left,#05a9ab, #08b9bb);/* webkit */
background: -moz-linear-gradient(left,#05a9ab, #08b9bb);/* fx */
background: -o-linear-gradient(left,#05a9ab, #08b9bb);/* opera */
background: linear-gradient(left,#05a9ab, #08b9bb);
border-top:solid 1px #30ccce;
border-bottom:solid 1px #068e90;
color:#FFFFFF;
}
#contents ul.accordion > li > .accordion_head:hover {
background:#ffa53c;
background: -webkit-gradient(linear, left, right, from(#f59f3b),to(#ffab48));/* webkit */
background: -webkit-linear-gradient(left,#f59f3b, #ffab48);/* webkit */
background: -moz-linear-gradient(left,#f59f3b, #ffab48);/* fx */
background: -o-linear-gradient(left,#f59f3b, #ffab48);/* opera */
background: linear-gradient(left,#f59f3b, #ffab48);
border-top:solid 1px #ffac4b;
border-bottom:solid 1px #d08630;
color:#FFFFFF;
}
/* ----------------------------------------
accordionの中身
---------------------------------------- */
#contents ul.accordion li ul {
width:230px;
padding:10px 0;
background:#454545;
}
#contents ul.accordion li li {
font-size:10px;
background:#454545;
}
#contents ul.accordion li li a {
display:block;
width:205px;
padding:7px 5px 7px 20px;
color:#b9b9b9;
}
#contents ul.accordion li li a:hover {
color:#e93072;
}
1:ノーマルアコーディオン
カスタマイズなしの普通のアコーディオンです。
- Home(これは普通のナビゲーション)
-
Company(これはアコーディオン)
-
Blog(これはアコーディオン)
- Contact(これは普通のナビゲーション)
クラス名
accordion1
Script
$('.accordion1').click(function() {
$(this).next().slideToggle();
}).next().hide();
2:一つだけ開いているアコーディオン
一番最初のアコーディオンだけ開いています。
クラス名
accordion2
Script
$('.accordion2').click(function() {
$(this).next().slideToggle();
}).next().hide();
$('.accordion2:first').next().show();
3:一つ開くとアコーディオン
一つのアコーディオンを開くと他は閉まります。
クラス名
accordion3
Script
$('.accordion3').click(function() {
$('.accordion3').next().slideUp();
$(this).next().slideToggle();
}).next().hide();
4:選択中アコーディオン
「選択中のアコーディオンの色を変える」改良版。
クラス名
accordion4
Script
$('.accordion4').click(function() {
$(this).toggleClass("selected").next().slideToggle();
}).next().hide();
5:一つ開くと選択中アコーディオン
選択中のアコーディオンの色を変えつつ、一つのアコーディオンを開くと他は閉まります。
クラス名
accordion5
Script
$('.accordion5').click(function() {
$('.accordion5').removeClass("selected").next().slideUp();
$(this).toggleClass("selected").next().slideToggle();
}).next().hide();
6:一括開閉アコーディオン
一括開閉の改良版。選択中も付け加えています。
OPEN
クラス名
accordion6
HTML
ボタン用のコードを追加します。
<div class="accordion_open">OPEN</div>
CSS
ボタン用のCSSを追加します。
- 現在位置 :
- ホーム
- アコーディオン実験用
×
