jQuery ile Menüyü Responsive Dropdownlist Yapma
1796 görüntüleme

Merhaba Arkadaşlar,

Responsiv menülerde internetteki örneklerde hep aşağı doğru uzayan bir liste şeklinde olanlardan var ki o da güzel bir çalışma fakat bazen isteklerimiz o tarz bir menü ile karşılanamamaktadır.

iki üç menülük bir yapı için düşünüle bilir fakat uzun bir menünüz olduğunu düşünürseniz tüm sayfayı kaydırmaktanda dropdownlist şeklinde açılması çoğu akıllı telefonda daha işlevseldir. şimdi bununla ilgili bir örnek yapacağız.

 

örnek yaptığmıız menü normal hali

çözünürlük küçültüğünde aldığı hali

 

öncelikle menümüzü bir oluşturalım. menümüz sanatçıların olduğu uzunca bir menü diye düşünelim.

<nav>
  <ul>
       <li><a href="#">Şarkıcılar</a></li>
      <li><a href="#">Sibel Can</a></li>
      <li><a href="#">Gülşen</a></li>
      <li><a href="#">Mustafa Sandal</a></li>
      <li><a href="#">Demet Akalın</a></li>
      <li><a href="#">Barış Manço</a></li>
  </ul>
  </nav>

 

menümüzü şekillendirmek için gerekli css kodlarımızı yazalım fazla bir şekillendirme yapmayacağım örnek daha basit olsun diye css şekillendirmesi size kalmış artık

nav select {
    display:none;
}
nav ul {
    display: block;
    z-index: 999999;
    margin: 0px;
    padding: 0px;
}
nav ul li {
    display: inline-block;
    position: relative;
    float: left;
    padding: 20px;
    list-style-type: none;
}
nav ul li a{
    color: #444;
    display: inline-block;
    position: relative;
}

 

menümüz birşeylere benzemeye başladı. şimdi işin can alıcı noktalarına geçelim

bu menü çözünürlüğe göre nasıl ufalacak o da css in @media only screen özelliğine dayalı 

css imize aşağıdaki kodları da ekliyoruz.

 

@media only screen and (max-width: 767px) {
 
     
        nav ul {
            display:none;
        }
        nav select {
            width:100%;
            display:block;
            margin-bottom:30px;
            cursor:pointer;
            padding:6px;
            background:#f9f9f9;
            border:1px solid #e3e3e3;
            color:#777;
        }
}

 

yukarıdaki css de yaptığımız tek şey ekran çözünürlüğü 767px in altına düşerse ne olacağı.

 

bu menünün 767 çözünürlük altına düştüğünde dropdownliste dönüşmesi için biraz jquery den destek alacağız bunu için klasik jquery kütüphanemizi ekliyoruz.

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

 

ardından yazacağımız kod gayet açık olduğu için tek tek anlatmayacağım sadece yaptığımız işlem nav tagının içindeki li satırlarını dropdownlist için option elementleri arasına almak ve link özelliğini burda da taşıyabilmesi için ufak bir kod bloğu bu kodlara ellemediğiniz takdirde zaten sorunsuz çalışacaktır.:)

 

<script>  
 
$(function(){
 
    $('<select />').appendTo('nav');
 
 
    $('<option />', {
        'selected': 'selected',
        'value' : '',
        'text': 'MENÜLER'
    }).appendTo('nav select');
 
    $('nav ul li a').each(function(){
        var target = $(this);
 
        $('<option />', {
            'value' : target.attr('href'),
            'text': target.text()
        }).appendTo('nav select');
 
    });
 
 
    $('nav select').on('change',function(){
        window.location = $(this).find('option:selected').val();
    });
});
 
 
</script>

 

Umarım birilerinin işine yarar..

Bir sonraki makalemizde görüşmek dileğiyle

Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.