Ukryj elementy menu jeden po drugim na zmianę rozmiaru okna

Question

Pracuję na pasku nawigacyjnym składającym się z elementów pływających po menu z logo & i przycisku rozwijanego z przesunięciem w prawo. Gdy okno przeglądarki osiągnie pewien niewielki rozmiar, elementy paska zaczną przeskakiwać do następnego wiersza, ponieważ nie ma już wystarczającej ilości miejsca.

Sprawdźcie tutaj: http://codepen.io/anon/pen/YXBaEK

Zamiast rozpoczynać nowy wiersz chciałbym każda pozycja menu znikają jeden po drugim, jeśli pozioma przestrzeń ucieka. (Nadal mam linki do menu w rozwijanym menu obok paska wyszukiwania).

HTML

<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

.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; 
} 

Dziękuję za pomoc

EDIT: liczba i zawartość pozycji menu nie są statyczne. Nie wiem, ile tam będzie i co napisano w środku.

Answer 1

Mam to działa tylko z CSS. Pozycje menu zostaną podzielone na następny wiersz, ale nawigacja ma ustalony rozmiar z przepełnieniem: ukryty, więc nie zobaczysz ich.

Zrobiłem Codepen z moim rozwiązaniem. Główne zmiany to: zmiana wartości aktywów netto na stałej wysokości:

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

i przenieść element wyszukiwarki przed menu

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

a potem nie unosił całe menu, ale każdy pojedynczy element do left:

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

oto link do Codepen: http://codepen.io/anon/pen/bdzKYX

Answer 2

Trzeba użyć zapytań o media za to, na przykład:

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

Reference

Answer 3

To będzie trudny do rozwiązania tego problemu w czystym CSS, jeśli nie znają już szerokościach elementy menu, a nawet wtedy trzeba by było aktualizować szerokości w zapytaniach o media.

Oto szorstki rozwiązanie w JavaScript - 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); 
}); 

To trochę niepewny w mojej przeglądarce, ale prawdopodobnie można budować na tym, aby zmiana rozmiaru gładsza.

Daj mi znać, jeśli masz pytania.