jQuery'de Ekrana Sığmayan Menüleri "Diğer" Menüsü Altında Nasıl Listelerim?

merhaba,

Bir wordpress teması hazırlamaya çalışıyorum.
Temanın Header bölümünde solda logo sağda arama kutusu ve ortada Ana menü bulunuyor.
Ana menüdeki kategoriler yatay bir şekilde sıralanmakta ve çok fazla kategori eklenildiğinde kapsayıcı div içerisine sığmadığında bir alt satıra geçiyor ve oradan devam ediyor.
Benim burada yapmak istediğim Jquery ile alt satıra düşen kategorileri alıp menünün en sonuna diğerleri yazan bir kategori ismi koyarak bu kategorinin içine koymak.
Yani diğerleri isminde bir sub menü oluşturup üzerine gelindiğinde alt satıra kayan kategoriler bunun içinde görüntülemek.

Bu konuyla alakalı bir KOD istemiyorum.
Jquery ile bunu nasıl yapabilirim mantığını anlatın sadece.
örneğin: menüyü kapsayan divin uzunluğunu al, li etiketlerini for döngsü ile uzunluklarını toplayarak git, li etiketlerinin uzunluklarının toplamı kapsayıcıdan büyük ise geri kalan li etiketlerinin index numaralarını al gibi.......

Hazırladığım tema responsive bir temadır. Ekran çözünürlüğüne göre ve tarayıcı küçültüldüğünde ortada bulunan menü yü kapsayan div'in boyutu değişmektedir.

Anlatımlarınızı bunu dikkate alarak yaparsanı sevinirim.

Verdiğin örnek mantıklı gibi duruyor. Örnek ile alakalı herhangi bir sıkıntı (takıldığın nokta, vs..) yaşadın mı?

Javascript ve jquery de yeniyim, mantığını oluşturamıyorum kafamda sorun burada başlıyor.

Şuan CSS framework kullanmadan ufak bir uygulama yaptım. Yaptığım uygulamada ekrana sığmayan menüler ekranda gizleniyor ve diğer menüsünün altında gözüküyor. Bunu anlatmam biraz uzun sürebilir ve anlattığım yöntem karışık da olabilir. Bunun için HTML kodlarını atarsan ona göre düzenleme yapıp uygulamanın son halini gösterebilirim.

Ben css framework kullanıyorum ve mobil için gizleyip gösteriyorum bu menüyü amacım desktop görünümde bunu yapmak çünkü menü kategorileri değişken , yönetici yeni bir kategori girdiğinde temada nasıl göründüğü ile uğraşmamalı.

Bootstrap mi kullanıyorsunuz?

Zurb foundation 6 kullanıyorum.

Özelden mesaj attım bakar mısınız?

Sanırım farklı bir framework kullanıyorsunuz. Codepen üzerinden HTML ve CSS yapınız ile ilgili ufak bir örnek yapar mısınız. 

Aşağıdaki gibi bir menüm olduğunu varsayalım ve bu menu 1024px den düşük olduğunda bu menü gizleniyor yerine mobil menü görüntüleniyor.

Benim yapmak istediğim 1024px ve üzeri çözünürlüklerde sığmayıp aşağıya taşan kategorileri en sona "diğer" adında kategori ekleyerek bunun içinde göstermek.

http://codepen.io/atasoy/pen/ObmeWL

Çalışmanıza uygun bir örnek yaptım. Örneği aşağıdan inceleyebilirsiniz.

Bu uygulamanın temel mantığı ise şu şekilde;

Öncelikle HTML kısmında menüleri ana menü ve diğer menü olmak üzere iki farklı yerde listelememiz gerekiyor. Ana menüde listelenen menüler ekranda gözükecek. Diğer menüde listelenen menüler ise varsayılan olarak (.hide) gözükmeyecektir.

<div class="top-bar">

  <!-- ana menü -->
  <nav class="top-bar-section" id="main-menu">
    <ul class="menu vertical medium-horizontal desktop-menu" data-responsive-menu="drilldown medium-dropdown">
      <!-- burada menüler listelenecek -->
      <li><a href="#">Ana Sayfa</a></li>
      <li><a href="#">Haber</a></li>
      ...
    </ul>
  </nav>

  <!-- diğer menüsü -->
  <nav class="top-bar-section" id="other-menu">
    <ul class="menu vertical medium-horizontal desktop-menu" data-responsive-menu="drilldown medium-dropdown">
      <li class="diger has-dropdown">
        <a href="#">Diğer</a>
        <ul class="dropdown">
          <li class="hide"><a href="#">Anasayfa</a></li>
          <li class="hide"><a href="#">Haber</a></li>
          ...
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS bölümünde ise ana menünün ul etiketine 10000px genişliğini veriyoruz. Bunu vermemizin nedeni menünün yatay olarak sonsuza kadar uzamasıdır. Sonrasında ana menüye position: relative; özelliğini vererek kapsayıcımızı belirliyoruz. Bu özelliği vermemizin temel nedeni jQuery position() fonksiyonunun kapsayıcıyı (relative) baz alarak konum (left, top, vb.) vermesidir.

// ana menü
.top-bar #main-menu {
  overflow: hidden;
  position: relative;
}
.top-bar #main-menu ul.desktop-menu {
  float: left;
  width: 10000px;
}
.top-bar #main-menu ul.desktop-menu li {
  float: left;
}
.top-bar #main-menu ul.desktop-menu li.hide {
  display: block !important;
  visibility: hidden;
}

// diğer menüsü
.top-bar #other-menu {
  display: inline-block;
  position: absolute;
  left: inherit !important;
  right: 0;
  top: 0;
}

jQuery kodlarında commitlerle neyin ne olduğunu az çok anlattım. Bu örneğin mantığı ise şu şekilde işliyor;

Sayfadaki her bir menünün sol tarafa uzunluğu ve kendi genişliğini, "0: 150" (sira_no: toplam_genislik) formatında bir dizinin içine kaydedip döngüye alıyoruz. Sonrasında mevcut menünün toplam genişliği ekran genişliğinden uzunsa (yani ekrandan taşıyorsa) menüye hide isimli sınıf ekleyip, diğer menüde de hide sınıfını kaldırıyoruz. Ve böylece ana menüde gizleyip diğer menüsünde de gösteriyoruz.

// sayfa yüklediğinde fonksiyonu çalıştıralım
$(document).ready(function() { responsiveMenu(); });

// ekran boyutu değiştiğinde fonksiyonu çalıştıralım
$(window).resize(function() { responsiveMenu(); });


// sık kullandığımız elemanları değişkenlerde tutalım.
var $menu             = $('#main-menu')
  , $menu_ul          = $menu.find('ul.desktop-menu')
  , $menu_ul_li       = $menu_ul.find('> li')
  // diğer menü
  , $diger_menu       = $('#other-menu ul.desktop-menu').find('> li.diger')
  , $diger_menu_ul    = $diger_menu.find('> ul')
  , $diger_menu_ul_li = $diger_menu_ul.find('> li');

/*
 * bu fonksiyon, ekranda görünmeyen menüleri 
 * "diğer" menüsü altında gösterir.
 */
function responsiveMenu() {
  
  // fonksiyon içinde kullanacağımız değişkenleri belirleyelim.
  var menuGenislik    = $menu.width()
    , menuLiGenislik  = [];
  
  /*
   * bu döngüde menülerin toplam uzunluklarını
   * menuLiGenislik dizisinde "index: width" olarak saklayacağız. 
   * sonrasında menüleri gösterip/gizlerken bu diziyi kullanacağız.
   */
  $menu_ul_li.each(function() {
    
    // mevcut menünün sırasını alalım.
    var i = $(this).index();
    
    // mevcut menünün en sol tarafa olan uzunluğunu alalım.
    menu_soldan_uzunluk = $(this).position().left;
    
    // menüye kendi genişliğini de ekleyelim.
    menu_toplam_uzunluk = menu_soldan_uzunluk + $(this).width();
    
    // menüye "diğer" menüsünün genişliğini de ekleyelim
    menuLiGenislik[i] = menu_toplam_uzunluk + $diger_menu.width();
  });
  
  
  
  /*
   * menuLiGenislik dizisini döngüye alalım.
   * bu dizinin içinde menünün sıra numarası ve toplam genişliği var
   *
   *    Array
   *      0: 165.28125
   *      1: 230.703125
   *      ...
   *  
   */
  $.each(menuLiGenislik, function(key, value) {
    
    // mevcut menü, #main-menu'den uzunsa
    if (value > menuGenislik) {
      
      // menüde gizleyelim
      if ($menu_ul_li.eq(key).hasClass('hide') == false)
        $menu_ul_li.eq(key).addClass('hide');
      
      // diğer menüsünde gösterelim
      if ($diger_menu_ul_li.eq(key).hasClass('hide') == true)
        $diger_menu_ul_li.eq(key).removeClass('hide');
      
    // mevcut menü, #main-menu'den uzun değilse
    } else {
      
      // gizlenmiş menü varsa gösterelim.  
      if ($menu_ul_li.eq(key).hasClass('hide') == true)
        $menu_ul_li.eq(key).removeClass('hide');
      
      // diğer menüsünde de gösterelim.
      if ($diger_menu_ul_li.eq(key).hasClass('hide') == false)
        $diger_menu_ul_li.eq(key).addClass('hide');
    }
  });
}

Bu kodları kullarak ekranda görünmeyen menüleri diğer menüsünde gösterebilirsiniz.

Nurullah bey yardımlarınız için teşekkürler, iyi çalışmalar...

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git