Bu yazımızda, "definition list (dl)" kullanarak akordiyon (accordion) menu uygulaması yapacağız, daha önceki örneğimizde "unordered list (ul)" kullanarak yapmıştık.
Uygulama:
CSS yapısı:
.article_list{
margin-left:10px;
width:193px;
padding:0;
}
.article_list_item dt{
background:url('blue_list_icon.png') no-repeat 5% 50% #eaeaea;
border-radius:4px;
padding:3px 0px 3px 20px !important;
margin-bottom:2px;
}
.article_list_item dt a{
color:#44a5e4;
text-decoration:none;
}
.article_list_item dt a:hover{
color:#414141;
text-decoration:none;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.child1{
background:#fff;
border:1px solid #eaeaea;
border-radius:4px;
margin:2px 0 2px 0;
padding:2px 0px 2px 20px !important;
display:none;
}
.child1 a{
color:#44a5e4;
font-style:italic;
text-decoration:none;
}
HTML yapısı:
<div class="article_list">
<dl class="article_list_item">
<dt><a href="#">Menü Başlık-1</a></dt>
<dd class="child1"><a href="#">Çocuk Başlık-1-1</a></dd>
<dd class="child1"><a href="#">Çocuk Başlık-1-4</a></dd>
<dt><a href="#">Menü Başlık-2</a></dt>
<dd class="child1"><a href="#">Çocuk Başlık-2-1</a></dd>
<dd class="child1"><a href="#">Çocuk Başlık-2-2</a></dd>
<dd class="child1"><a href="#">Çocuk Başlık-2-3</a></dd>
<dt><a href="#">Menü Başlık-3</a></dt>
<dd class="child1"><a href="#">Çocuk Başlık-3-1</a></dd>
<dd class="child1"><a href="#">Çocuk Başlık-3-2</a></dd>
<dd class="child1"><a href="#">Çocuk Başlık-3-3</a></dd>
</dl>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Link tıklanınca gerçekleşecek olaylar belirleniyor.
$('.article_list_item a').on({
click:function(event){
/**
Oku değiştirirken tıklanan linki bulmak için
ve $(this) kullanımının karışmaması için
ilk tıkladığım linki bir değişkene aktarıyorum
*/
var status = $(this);
//Link href değeri alınıyor.
var link=$(this).attr("href");
//Bu değer "#" ise, yani çocuk bağları var ise...
if(link=="#"){
//link gönderme olayını engelliyoruz.
//Bunu engellemezsek "#" linke gitmek isteyecektir.
//bu durumda öyle veya böyle sayfada bir hareket olacaktır.
//preventDefault() sayesinde bu işlem tamamen iptal edilmiş olur.
event.preventDefault();
//Basılan link nesnesinin, parent (ebeveyn) nesnesinin (dt)
//arkaplan stil özelliği değiştiriliyor.
$(this).parent('dt').css("background","url('images/content/demo/blue_list_icon_down.png') no-repeat 5% 50% #eaeaea");
//Basılan link nesnesinin ebeveyn değerinin
//bir sonraki 'dt' nesnesine kadar
//aşağı doğru açılması sağlanıyor.
$(this).parent('dt').nextUntil('dt').slideToggle( "slow", function() {
if ($(this).is(':not(:visible)')) {
//Tekrar oku eski haline çeviriyoruz
status.parent('dt').css("background","url('images/content/demo/blue_list_icon.png') no-repeat 5% 50% #eaeaea");
}
});
}else{
//Eğer link href değeri "#" değil de gerçek bir link ise
//ilgili sayfaya gönderiliyor.
window.location.assign(link);
}
}
});
});
</script>
Açıklamalar:
Kodların üzerindeki açıklamaların yeterli olacağını düşünüyorum, (Mantık olarak önceki uygulamamızla hemen hemen aynı, detaylar için önceki uygulamayı inceleyebilirsiniz).
ÖNEMLİ: Bu örnekte diğerinden farklı olarak, çocuk bağları içeren link nesnesi için "preventDefault()" uygulaması yaptık. Bu fonksiyonun amacı, tetikleyeceğiniz nesnenin üzerinde başka olay (Bu örnekte link...) veya hareket varsa bunları engellemektir.
Kolay gelsin, görüşmek üzere...
