Pilihan tata letak responsif
liteAccordion sekarang memiliki opsi tata letak responsif. Jika Anda mengatur {responsif: true} dalam pilihan Plugin, akordeon sekarang akan meregangkan sesuai desain responsif halaman Anda. Hal ini juga bekerja pada perangkat mobile ketika orientasi perangkat berubah. Lihat demo pada desktop atau mobile di sini . Gunakan opsi minContainerWidth dan maxContainerWidth dalam hubungannya dengan opsi responsif, untuk membatasi minimum dan maksimum rentang akordeon Anda dapat skala untuk.
gambar Auto skala Jika Anda berencana untuk menggunakan liteAccordion sebagai gambar slider, sekarang ada opsi untuk mengatur skala gambar yang terkandung dalam slide untuk secara otomatis sesuai dengan dimensi slide. Ini bekerja dalam mode lebar responsif dan tetap. Check out demo responsif untuk melihatnya dalam tindakan.CSS ::
<style type="text/css">
@ charset 'utf-8';
/ ******************************* ******************!
*
proyek *: liteAccordion - plugin akordeon horisontal untuk jQuery
*
* Versi: 2.1.1
* Copyright: (c) 2012-2013
* Lisensi: MIT
*
************************************************ ** /
/ ****************************************** Inti * /
. liteAccordion {text-align: left; huruf:;: transparan 'Helvetica Neue', Verdana, Arial, sans-serif-webkit-tap-highlight-warna}
liteAccordion> ol {position:. relatif; overflow: hidden; height: 100 %, margin: 0; padding: 0; list-style-type: none}
.. geser liteAccordion> h2 {
warna: hitam;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100 ,
posisi: absolut;
top: 0;
kiri: 0;
-webkit-backface-visibility: hidden; / * perbaikan bug chrome * /
-webkit-transform: translateX (-100%) memutar (-90deg);
-webkit-transform -asal: kanan atas;
-moz-transform: translateX (-100%) memutar (-90deg);
-moz-transform-asal: kanan atas;
-o-transform: translateX (-100%) memutar (-90deg);
-o-transform-asal: kanan atas,
transform:; translateX (-100%) memutar (-90deg)
:; kanan atas transformasi-asal
}
geser liteAccordion> h2 rentang {..
display: block;
padding-right: 8% ;
text-align: right;
height: 90%;
margin-top: 5px;
-webkit-user-pilih: none;
-KHTML-user-pilih: none;
-moz-user-pilih: none;
-ms-user- pilih: none;
user-pilih:, tidak satupun
}
geser liteAccordion> h2 {b..
display: inline-block;
position: absolute;
top: 13%;
kiri: 10%;
text-align: center;
-webkit-transform: memutar (90deg);
-moz-transform: rotate (90deg);
-o-transform: rotate (90deg);
transform: rotate (90deg);
} .. geser liteAccordion> h2: hover {cursor: pointer} .. liteAccordion geser > div {height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: putih} . liteAccordion noscript p {padding: 10px; margin: 0; background: putih} / ** **************************************** Dasar * / geser liteAccordion.basic.>. h2 {background: # 333, warna: putih, line-height: 225%} / ******************************* *********** Gelap * / . liteAccordion.dark { border: 9px solid # 353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: # 030303; -webkit-box -shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); -moz-box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0 , 0,4); -ms-box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); -o-box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); } .. liteAccordion.dark geser> h2 {background: # 030303; text-shadow: 0 1px 0 #-030.303, line-height: 265%} . liteAccordion.dark geser> h2 rentang {background: # 353535; warna:. white} .. geser liteAccordion.dark> h2 {b background: # 353535; color: # 030303; text-shadow: 1px 1px-0 # 5b5b5b} .... slide slide liteAccordion.dark> h2.selected span, liteAccordion.dark> h2.selected rentang: hover { background: # 353.535, background:-moz-linear-gradien (kiri, # 353535 0%, # 555555 100%), background:-webkit-gradien (linier, kiri atas, kanan atas, warna-stop (0%, # 353.535), warna-stop (100%, # 555555)); background:-webkit-linear-gradien (kiri, # 353535 0%, # 555555 100%), background:-o-linear-gradien (kiri, # 353535 0%, # 555555 100%), background:-ms-linear-gradien (kiri, # 353535 0%, # 555555 100%), background: linear-gradien (kiri, # 353535 0%, # 555555 100%); filter: PROGID : DXImageTransform.Microsoft.gradient (startColorstr = '# 353535', endColorstr = '# 555555', GradientType = 1); } liteAccordion.dark geser> h2.selected b {.. background: # 383838; background:-moz-linear -gradien (atas, # 3a3a3a 0%, # 363636 100%), background:-webkit-gradien (linier, kiri atas, kiri bawah, warna-stop (0%, # 3a3a3a), warna-stop (100%, # 363.636)); background:-webkit-linear-gradien (atas, # 3a3a3a 0%, # 363636 100%), background:-o-linear-gradien (atas, # 3a3a3a 0%, # 363636 100%); latar belakang: -ms-linear-gradien (atas, # 3a3a3a 0%, # 363636 100%), background: linear-gradien (atas, # 3a3a3a 0%, # 363636 100%); } .. geser liteAccordion.dark> div {background : # 030303; margin-left: 5px} / *************************************** ** Cahaya * / . liteAccordion.light { border: 9px putih solid, border-bottom-width: 8px; padding: 5px 5px 6px 0; background: # a0a0a0; -webkit-box-shadow: 1px-1px-0 # c0c0c0 , 1px 1px 0 # c0c0c0, 0 5px 15px RGBA (0, 0, 0, 0,4); -moz-box-shadow: 1px-1px-0 # c0c0c0, 1px 1px 0 # c0c0c0, 0 5px 15px RGBA (0, 0 , 0, 0,4); -ms-box-shadow: 1px-1px-0 # c0c0c0, 1px 1px 0 # c0c0c0, 0 5px 15px RGBA (0, 0, 0, 0,4); -o-box-shadow: 1px- -1px 0 # c0c0c0, 1px 1px 0 # c0c0c0, 0 5px 15px RGBA (0, 0, 0, 0,4); box-shadow: 1px-1px-0 # c0c0c0, 1px 1px 0 # c0c0c0, 0 5px 15px RGBA (0 , 0, 0, 0,4); } geser liteAccordion.light> h2 {background: # a0a0a0; text-shadow:.. 0-0 1px putih, line-height: 265%} .. geser liteAccordion.light> h2 rentang { background: # fcfcfc; background:-moz-linear-gradien (kiri, # fcfcfc 0%, # ededed 100%), background:-webkit-gradien (linier, kiri atas, kanan atas, warna-stop (0%, # fcfcfc), warna-stop (100%, # ededed)); background:-webkit-linear-gradien (kiri, # fcfcfc 0%, # ededed 100%), background:-o-linear-gradien (kiri, # fcfcfc 0%, # ededed 100%), background:-ms-linear-gradien (kiri, # fcfcfc 0%, # ededed 100%), background: linear-gradien (kiri, # fcfcfc 0%, # ededed 100%); filter: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# fcfcfc', endColorstr = '# ededed', GradientType = 1); -webkit-box-shadow: 1px-1px-0 # 909.090 inset, 1px 1px 0 # 909090 inset; -moz-box-shadow: 1px-1px-0 # 909.090 inset, 1px 1px 0 # 909.090 inset; -o-box-shadow: 1px-1px-0 # 909.090 inset, 1px 1px 0 # 909.090 inset; kotak- shadow:-1px 1px 0 #-909.090 inset, 1px 1px 0 # 909.090 inset, warna:; # 909090 } geser> h2 b {background liteAccordion.light: # ffffff; color: # 909090; text-shadow: 1px-.. 1px 0 white} geser liteAccordion.light geser> h2.selected span, liteAccordion.light h2.selected rentang:.... hover, liteAccordion.light geser> h2.selected b {background:.. # ffffff} . liteAccordion.light . geser> div {background: # a0a0a0; margin-left: 5px} / ********************************* ******* Stitch * / . liteAccordion.stitch { position: relative; padding: 5px 5px 5px 0; border: 11px solid # 353535; background: # 353535; -webkit-box-shadow: 0 1px 0 #- 5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); -moz-box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); -o-kotak -shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4); box-shadow: 0 1px 0 #-5b5b5b inset, 0 5px 15px RGBA (0, 0, 0, 0,4) ; }liteAccordion.stitch: sebelum {. isi:''; width: 100%; height: 100%; position: absolute; top:-9px; kiri:-9px; background: # 353535; border: 9px padat transparan; - -webkit-border image: url ('bg_stitch.png') 9 ulangi, -moz-border-image: url ('bg_stitch.png') 9 ulangi; -o-perbatasan-image: url ('bg_stitch.png') , 9 ulangi , url ('bg_stitch.png') 9 ulangi:-image perbatasan } } # 353535: slide liteAccordion.stitch> h2 {background.. geser liteAccordion.stitch> h2 rentang {.. height: auto; padding-right : 5%; warna: putih, text-shadow: 1px 1px-0 # 5b5b5b, perbatasan: 9px padat transparan, background-image: url ('bg_noise.png'); margin-top: 0; -webkit-border-image : url ('bg_stitch.png') 9 ulangi, -moz-border-image: url ('bg_stitch.png') 9 ulangi; -o-perbatasan-image: url ('bg_stitch.png') 9 ulangi; perbatasan- image: url ('bg_stitch.png') 9 ulangi; } .. liteAccordion.stitch geser> h2.selected: setelah { isi:''; display: block; height: 11px; width: 11px; position: absolute; bottom: -3px; kanan: 38px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); -ms-filter: " PROGID: DXImageTransform.Microsoft.BasicImage (rotasi = 2) "; filter: PROGID: DXImageTransform.Microsoft.BasicImage (rotasi = 2); border: 9px padat transparan, border-top: 0; border-left: 0; -webkit- -image border: url ('bg_stitch.png') 9 ulangi, -moz-border-image: url ('bg_stitch.png') 9 ulangi; -o-perbatasan-image: url ('bg_stitch.png') 9 ulangi ; :; border-image url ('bg_stitch.png') 9 ulangi , url ('bg_noise.png'): background-image } geser liteAccordion.stitch: n-anak (1)> h2 span, liteAccordion.... . stitch slide: n-anak (1)> h2:: setelah {# c25252 background-color} geser liteAccordion.stitch:.... n-anak (2)> h2 span, liteAccordion.stitch slide: n-anak ( 2)> h2: setelah {background-color: # ca9859} .. liteAccordion.stitch slide:.. n-anak (3)> h2 span, liteAccordion.stitch slide: n-anak (3)> h2: setelah {background # 96ba5f}:-warna # 59abb7}: slide liteAccordion.stitch:.... n-anak (4)> h2 span, liteAccordion.stitch slide: n-anak (4)> h2: setelah {background-color liteAccordion. geser stitch:.... n-anak (5)> h2 span, liteAccordion.stitch slide: n-anak (5)> h2: setelah {background-color: # bb6098} . liteAccordion.stitch geser> h2 {b. top: 19%, warna: putih, text-shadow: 1px 1px 0 # 5b5b5b} .. liteAccordion.stitch geser> div {margin-right: 6px} . liteAccordion.stitch.rounded> ol {-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0; border-radius: 0} / *********************** **************** bulat * / . liteAccordion.rounded, bulat> ol {-webkit-border-radius: 6px;-moz-border-radius:. 6px;-ms- border-radius: 6px; border-radius: 6px} .. liteAccordion.rounded geser> h2 rentang {-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px; perbatasan -radius: 4px} / ******************************************** IE * / / * stitch * / : liteAccordion.ie.stitch geser> h2 {265% line-height}..geser liteAccordion.ie.stitch> h2 span.. {height: 89%; padding-right: 8%} .. geser liteAccordion.ie.stitch> h2.selected: setelah {display: none} . liteAccordion.ie.stitch slide-0> h2 rentang {background-color: # c25252}. .. liteAccordion.ie.stitch slide-1 > h2 rentang {background-color: # ca9859} :. liteAccordion.ie.stitch slide-2> h2 rentang {# 96ba5f background-color}. slide-3> h2 rentang {background-color liteAccordion.ie.stitch:.. # 59abb7} } # bb6098: slide-4> h2 rentang {background-color liteAccordion.ie.stitch.. / * transformasi * / geser liteAccordion.ie7> h2 {filter:.. PROGID: DXImageTransform.Microsoft.BasicImage (rotasi = 3)} . liteAccordion.ie7 geser> h2 b {filter: PROGID: DXImageTransform.Microsoft.BasicImage (rotasi = 1)}. liteAccordion.ie8 geser> h2 {filter:.. none;-ms-filter: "PROGID: DXImageTransform ";: none}-ms-transform Microsoft.BasicImage (rotasi = 3). geser liteAccordion.ie8> h2 b {filter:.. none;-ms-filter: "PROGID: DXImageTransform.Microsoft.BasicImage (rotasi = 1) ";-ms-transform: none} liteAccordion.ie9 geser> h2 {filter: none;-ms-filter:.. none;-ms-transform: translateX (-100%) memutar (-90deg);-ms-transform -asal: kanan atas} liteAccordion.ie9 geser> h2 b {filter:.. none;-ms-filter: none;-ms-transform: rotate (90deg)} / * misc * / .. liteAccordion.ie geser> h2 b {top: 36%; kiri: 5%} .... slide slide liteAccordion.ie.dark> h2 b, liteAccordion.ie.light> h2 b {top: 44%} .. geser liteAccordion.ie9.dark> geser h2.selected span, liteAccordion.ie9.dark> h2.selected rentang:... hover, liteAccordion.light geser> h2 rentang {filter: none}. . liteAccordion.ie9.stitch {box-shadow: 0 5px 15px RGBA }; (0, 0, 0, 0,4) geser liteAccordion.ie9.stitch> h2 b {top: 0; kiri:.. 10%} angka {display: block; width: 100%; height: 100%; margin: 0} figcaption {padding: 15px 10px; position: absolute; bottom: 20px; kanan: 30px; z-index: 3; background: hitam, latar belakang: RGBA (0,0,0,0.7), warna: putih; -webkit -border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px} # accorliteder img {width: 700 px, height: 320 px;} </ style>
SCRIPT ::
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'> </ script>
<-! pelonggaran - >
<script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"> </ script> <-! liteAccordion js -> <skrip src = "http:/ / nicolahibbert.com / demo / liteAccordion / js / liteaccordion.jquery.js "> </ script>
HTML ::
<div id="accorliteder">
<ol>
<li>
<h2> <span> Slide Satu </ span> </ h2>
<div>
<figure>
<img src = "http://nicolahibbert.com/demo / liteAccordion/img-demo/1.jpg "alt =" image "/>
<figcaption> Assassini! </ figcaption>
</ figure>
</ div>
</ li>
<li>
<h2> <span> Slide Dua </ span> </ h2>
<div>
<figure>
<img src="http://nicolahibbert.com/demo/liteAccordion/img-demo/2.jpg" alt="image" />
<figcaption> Couldn 't menemukan gambar seorang pencuri Khajit! Gagal </ figcaption>!
</ angka>
</ div>
</ li>
<li>
<h2> <span> Slide Tiga </ span> </ h2>
<div>
<figure>
<img src = "http: / / nicolahibbert.com/demo/liteAccordion/img-demo/3.jpg "alt =" image "/>
<figcaption> Itulah satu dude merah terlihat marah. </ figcaption>
</ figure>
</ div>
</ li >
<li>
<h2> <span> Slide Empat </ span> </ h2>
<div>
<figure>
<img src = "http://nicolahibbert.com/demo/liteAccordion/img-demo/4.jpg "width =" 768 "alt =" image "/>
<figcaption> Apakah menyenangkan untuk beberapa jam atau lebih ... </ figcaption>
</ angka>
</ div>
</ li>
<li>
<h2> <span> Slide Lima </ span> </ h2>
<div>
<figure>
<img src = "http://nicolahibbert.com/demo/liteAccordion/img-demo/5.jpg" alt = "image" / >
<figcaption> Tidak sebagus seperti Hot Pursuit </ figcaption>.
</ angka>
</ div>
</ li>
</ ol>
</ div> <-! skrip aktif -> <skrip
Contoh Lite Accordion Slider jQuery Horizontal!
Silahkan Sobat berekperimen SENDIRI Artikel Baru mengutak-atik Kode CSS, SCRIPT & HTML yg sudah SAYA berikan Diatas, Goodluck Dan Semoga tutorial inisial bermanfaat * Bagi kitd * Semua ^ ^
Tidak ada komentar:
Posting Komentar
Salam Sukses