今回紹介するのは横にスライドする
アコーディオンメニューです。
実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HorrizontalAccordion</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.zaccordion.js"></script> <style> *{margin:0;padding:0;} ol,ul{list-style-type:none;} div#contents{ width:920px; height:400px; padding:20px; background-color:brown; position:absolute; margin:-220px 0 0 -480px; left:50%; top:50%; -webkit-box-shadow:0 0 50px rgba(0,0,0,0,5); } h1{ width:110px; height:370px; position:absolute; top:20px; right:20px; padding:30px 0 0 50px; background-color:skyblue;} ul#contentsList{width:760px;} ul#contentsList li{ width:460px; position:relative; overflow:visible;} ul#contentsList li:nth-of-type(1){ background-color:yellow;} ul#contentsList li:nth-of-type(2){ background-color:yellowgreen;} ul#contentsList li:nth-of-type(3){ background-color:purple;} ul#contentsList li:nth-of-type(4){ background-color:turquoise;} ul#contentsList li:nth-of-type(5){ background-color:pink;} ul#contentsList li:nth-of-type(6){ background-color:coral;} ul#contentsList li h2{ position:absolute; top:0; right:0; height:400px; padding:50px 15px 0 0; /* border-right:1px solid #ddd;*/ background-color:aquamarine;} ul#contentsList li.frame-open h2{ background-color:red;} </style> </head> <body> <div id="contents"> <h1></h1> <ul id="contentsList"> <li> <h2></h2> <div class="contentsBody"> </div> </li> <li> <h2></h2> <div class="contentsBody"> </div> </li> <li> <h2></h2> <div class="contentsBody"> </div> </li> <li> <h2></h2> <div class="contentsBody"> </div> </li> <li> <h2></h2> <div class="contentsBody"> </div> </li> <li> <h2></h2> <div class="contentsBody"> </div> </li> </ul> </div> <script> $(function(){ //アコーディオンの設定 var li = $("#contentsList li").toArray().reverse(); $("contentsList").empty().append(li); $("#contentsList").zAccordion({ timeout:1000, // 自動スライド時の１スライド当たりの表示時間 slideWidth:460, // アコーディオンのコンテンツの全体の幅 width:760, // アコーディオンのコンテンツの全体の高さ height:400, // スライドするコンテンツ１枚分の幅 speed:440, // スライドするコンテンツ１枚分の高さ startingSlide:5, // 最初に表示するコンテンツ番号 slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名 slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名 slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名 slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名 easing:"easeInOutCubic", // スライド時のアニメーション invert:true // 重なり順を逆にして見出しを右に持ってくる }); }); </script> </body> </html> |
今回使っているjQueryプラグイン
●jQuery zAccordion Plugin
Version 1.1.2
●Query Easing
Version 1.3
一定時間ごとにアコーディオンの展開が
１つずつ進んでいくオプションがありますが、
この順番は左から右になっています。
オプションでこの展開する順番を変更できないので
jquery.zaccordion.js の
192～195行目
211～214行目
261～264行目を下記のように変更しています。
変更前
var next = o.current + 1;
if( next > originals.length ){
next = 1;
}
変更後
var next = o.current - 1;
if( next == 0 ){
next = originals.length;
}
という変更を加えました。