Bootstrap ile minik bir akordeon tasarımı

Bootstrap

Websitenizin herhangi bir yerine ekleyebileceğiniz  küçük bir  galery örneği.  Emaj tarafından Bootstrap kütüphanesi kullanılarak hazırlanmış bu minik galeri örneği o kadra küçük ki websitenizin sidebar bölümüne dahi ekleyebilirsiniz. Akordiyon bir görünümde olan bu mini galeri örneğinde mouse ile reismlerin üzerne geldiğinizde  sol tarafa  doğru resimler kayıyor. bu işlem sırasında resimlerin açıklamalarıda üst üste  geçerken bir önceki resmin açıklaması kayboluyor ve görüntülediğiniz resmin açıklaması beliriyor.

 

Kullanım

  • Head etiketleriarasına eklemeniz gereken bölümler.

Bootstrap js ve css adresleri :

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />

Css :

#main {
 background-color: #222f33;
 height: 100%;
 width: 100%;
 position: absolute;
}
#main h1 {
 color: #FFF;
 font-weight: 100;
 letter-spacing: 3px;
 padding: 20px 0;
}
#main #gallery {
 overflow: hidden;
 height: 280px;
 background-color: #000;
 width: 400px;
 margin: auto;
 margin-top: 30px;
 -webkit-box-shadow: 0 2px 3px #12181b;
 -moz-box-shadow: 0 2px 3px #12181b;
 box-shadow: 0 2px 3px #12181b;
}
#main #wrapper {
 position: relative;
 width: 1000px;
 height: 250px;
}
#main #wrapper li {
 float: left;
 width: 50px;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 cursor: pointer;
}
#main #wrapper li:last-child {
 width: 250px;
}
#main #wrapper li p {
 position: absolute;
 top: 255px;
 left: 40px;
 font-size: 16px;
 color: #FFF;
 font-weight: 100;
 opacity: 0;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
#main #wrapper li:hover {
 width: 250px;
}
#main #wrapper li:hover p {
 opacity: 1;
 left: 10px;
}
#main #wrapper li:first-child {
 width: 250px;
}
#main #wrapper li:first-child p {
 opacity: 1;
 left: 10px;
}
#main #wrapper:hover li:first-child {
 width: 50px;
}
#main #wrapper:hover li:first-child p {
 opacity: 0;
 left: 40px;
}
#main #wrapper:hover li:first-child:hover {
 width: 250px;
}
#main #wrapper:hover li:first-child:hover p {
 opacity: 1;
 left: 10px;
}

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="main">
 <div id="gallery">
 <ul id="wrapper" class="list-unstyled">
 <li>
 <img src="http://lorempixel.com/250/250/nature" />
 <p>Photo 1 : nature</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250/animals" />
 <p>Photo 2 : animals</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250/fashion" />
 <p>Photo 3 : fashion</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250" />
 <p>Photo 4 : suprise :)</p>
 </li>
 </ul>
 </div>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-07-17 tarihinde yayınlandı,Toplam 2378 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...