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を追加します。
- 現在位置 :
- ホーム
- アコーディオン実験用
×