Pencere öğelerini tek tek tek olarak yeniden boyutlandırma

Question

Bir logo & menü öğelerinden oluşan bir navbar üzerinde çalışıyorum, sol kayan bir menü çubuğu ve bir arama çubuğu & bir sağ aşağı açılan düğme. Tarayıcı penceresi belirli bir küçük boyuta ulaştığında, artık yeterli alan olmadığı için navbar elemanları bir sonraki satıra atlamaya başlar.

burada bir göz atın: http://codepen.io/anon/pen/YXBaEK

yerine yatay alanı azalıyor eğer her menü öğesi tek-birer kaybolmaya istiyorum yeni bir satır başlangıç. (Hala arama çubuğunun yanındaki açılır menüde menü bağlantıları var).

HTML

.nav { 
    width: 100%; 
} 

.item-left { 
    width: 300px; 
    height: 50px; 
    background-color: green; 
    float: left; 
} 

.item-right { 
    width: 300px; 
    height: 50px; 
    background-color: red; 
    float: right; 
} 

.menu { 
    height: 50px; 
    background-color: yellow; 
    float: left; 
} 

Yardımlarınız

DÜZENLEME için teşekkür ederiz

<div class="nav"> 
    <div class="item-left">Logo</div> 
    <div class="menu"> 
    <a>-------Menu Item 1-------</a> 
    <a>-------Menu Item 2-------</a> 
    <a>-------Menu Item 3-------</a> 
    <a>-------Menu Item 4-------</a> 
    <a>-------Menu Item 5-------</a> 
    </div> 
    <div class="item-right">Search & Dropdown</div> 
</div> 

CSS: sayı ve menü öğelerinin içeriği statik değildir. İçinde kaç tane var ve ne yazılacağını bilmiyorum.

Answer 1

Sadece CSS ile çalışıyorum. Menü öğeleri sonraki satıra bölünecek, ancak nav taşma ile sabit bir boyuta sahip: gizli, bu yüzden onları göremezsiniz.

Çözümümle bir Codepen yaptım. ana değişiklikler şunlardır:

.nav { 
    height: 50px; 
    width: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

ve

<div class="item-left">Logo</div> 
<div class="item-right">Search & Dropdown</div> 
<div class="menu"> 

ve sonra tüm menü ama her tek öğe değil süzülüyor menüde önünde arama öğeyi taşımak: Sabit yüksekliğe nav değiştirmek sol: http://codepen.io/anon/pen/bdzKYX

: burada

.menu a{ 
    float: left; 
    height: 50px; 
} 

Codepen bağlantısı şudur

Answer 2

Örneğin, bunun için medya sorguları kullanmak gerekir:

@media (max-width: 1200px) { 
    .item-right { 
     display: none; 
    } 
} 

Reference

Answer 3

O zaten genişlikleri bilmiyorsanız, saf CSS bu sorunu gidermek için zor olacak

Menü öğelerini ve hatta daha sonra, medya sorgularındaki genişlikleri güncelleştirmeye devam etmeniz gerekir. Benim tarayıcı üzerinde biraz dalgalı var http://jsfiddle.net/vyder/eukr6m40/

$(document).ready(function() { 
    var resizeMenu = function() { 
     var windowWidth = $(this).width(); 

     // The width of stuff that needs to always be visible 
     var fixedWidth = $('.item-left').width() + $('.item-right').width(); 

     // Remaining width that the menu can occupy 
     var availableWidth = windowWidth - fixedWidth; 

     resizeMenuToWidth(availableWidth); 
    }; 

    var resizeMenuToWidth = function(availableWidth) { 
     var widthSoFar = 0; 

     // Iterate through menu items 
     $('.menu a').each(function() { 
      var itemWidth = $(this).width(); 

      // If the menu width has already exceeded the available space, 
      // or if this menu item will cause it to exceed the space 
      if(widthSoFar > availableWidth || (widthSoFar + itemWidth > availableWidth)) { 
       // Start hiding the menu items 
       $(this).hide(); 
      } else { 
       // Otherwise, show the menu item, and update the width count 
       $(this).show(); 
       widthSoFar += itemWidth; 
      } 
     }); 
    }; 

    // Resize menu to when the page loads 
    resizeMenu(); 

    // Also resize menu when the window is resized 
    $(window).resize(resizeMenu); 
}); 

, ama muhtemelen daha düzgün boyutlandırma yapmak için bu üzerine inşa edebilirsiniz -

İşte JavaScript kaba bir çözümdür.

Sorularınız varsa bize bildirin.