Horizontal AccordionTabs

By

tab
Örneğin şekline  bakıldığında  kwicks eklentisini  andıran bir yapısı  var.  Akordiyon örnekleri genelde  ya manşet kısmındaki slayt galeri örnekleri için kullanılır yada akordiyon menü olarak kullanılır. Bu örneğimizde bildiğimiz  tab örneğinin değiştirilmiş hali diyebiliriz. Tab örneklerinde  tıklanan sekmenin açıklaması  altında  açılırken bu demoda slayt akordiyon  olarak açılıp  sekmenin sağında  açıklamalar çıkıyor. Biraz özelleştirip akordiyon menü yada manşet kısımlarına ekleyebileceğiniz galeri alanı olarakta kullanabilirsiniz.

 

 Kullanım

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

Js ve css dosya adresleri : 

<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/standalo.css"/> 
 <!-- accordion styling --> 
 <link rel="stylesheet" type="text/css" href="css/tabs-acc.css"/>

JavaScript : 
<script>
 $(function() {
 $("#accordion").tabs("#accordion div", {
 tabs: 'img', 
 effect: 'horizontal'
 });
 });
 </script>

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

Html :

<!-- accordion root -->
<div id="accordion">
 <!-- accordion header #1 -->
 <img src="images/streamin.png" /> 
 <div style="width:200px;">
 <h3>First pane</h3>
 <p>
 Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
 </p>
 </div> 
 <img src="images/flash000.png" /> 
 <div>
 <h3>Second pane</h3>
 <p>
 Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. 
 </p>
 </div>
 <img src="images/streamio.png" /> 
 <div>
 <h3>Third pane</h3>
 <p>
 Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
 </p>
 </div> 
</div>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend