jQuery ile oluşturulmuş akordiyon örneği. Akordiyon örneği tam anlamıyla bir menü olarak hazırlanmış olamasa da kategorilerinizi entegre edip dikey akordiyon çalışmaları hazırlayabilmeniz için kulllanabileceğiniz oldukça basit bir iskelet diyebilirim. Akordiyon menü için gerekli olan animasyonlu kayan sekmeler li elementi ile oluşuyor. Birinci li elementi daima başlık olarak algılanıyor ve ikinci li elementide içerik olarak algılanıyor. Dikkat etmeniz gereken tek nokta li elementleri. Bunun dışında herhangi bir seçici bulunmuyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
JS dosya adresleri :
<!-- Add jQuery From the Google AJAX Libraries --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <!-- Import The jQuery Script --> <script type="text/javascript" src="jMenu.js"></script>
Css :
* {
margin: 0;
padding: 0;
}
body {
text-align: justify;
font-size: 14px;
line-height: 24px;
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
}
.accordian {
width: 400px;
margin: 50px auto;
}
.accordian li {
list-style-type: none;
padding: 0 5px;
}
.dimension {
height: 150px;
}
.even, .odd {
font-weight: bold;
height: 27px;
padding-top: 3px;
padding-left: 10px;
}
.even {
border: 1px solid #d8d8d8;
background-color: #ececec;
}
.odd {
border: 1px solid black;
background: #333;
color: white;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="accordian"> <ul> <li>Quisque at erat vitae</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, lorem et consectetur ultricies, nulla lacus iaculis odio, in laoreet lacus nisi vitae dolor. In commodo aliquet orci. Etiam pellentesque, sapien quis egestas gravida, velit dui tristique mi, at fringilla pede mauris id dolor. Integer bibendum ultrices enim.</li> <li>Sed euismod massa</li> <li>Mauris bibendum justo sit amet lectus laoreet faucibus. Aliquam cursus, diam sed lacinia ultrices, urna ipsum auctor lacus, id vulputate ante ligula aliquam odio. Fusce feugiat risus at nisl. Sed cursus, tortor et iaculis viverra, augue quam interdum ligula, nec sollicitudin libero urna nec felis. </li> <li>Proin et orci sit amet</li> <li>Sed vitae magna. Aliquam faucibus, felis ullamcorper feugiat semper, tortor leo tincidunt nibh, a faucibus lorem magna a nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet mauris eget elit tincidunt hendrerit.</li> </ul> </div>