Nascondi voci di menu una alla volta su ridimensionamento finestra

Question

Sto lavorando su una barra di navigazione costituita da un logo & voci di menu mobili a sinistra e una barra di ricerca & un pulsante a discesa mobile a destra. Quando la finestra del browser raggiunge una certa dimensione ridotta, gli elementi della barra di navigazione inizieranno a saltare nella riga successiva, perché non c'è più spazio sufficiente.

Date un'occhiata qui: http://codepen.io/anon/pen/YXBaEK

Invece di iniziare una nuova riga mi piacerebbe ogni voce di menu a scomparire uno ad uno se lo spazio orizzontale si sta esaurendo. (Ho ancora i collegamenti del menu in un menu a discesa accanto alla barra di ricerca).

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

Grazie per il vostro aiuto

EDIT: Il numero e il contenuto delle voci di menu non sono statici. Non so quanti ci saranno e cosa è scritto all'interno.

Answer 1

Ho capito che funziona solo con i CSS. Le voci del menu si sposteranno alla riga successiva, ma il nav ha una dimensione fissa con overflow: nascosto, quindi non le vedrai.

Ho realizzato un Codepen con la mia soluzione. Le principali modifiche sono: cambiare il NAV per altezza fissa:

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

e spostare l'elemento di ricerca di fronte al menù

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

e poi non galleggiare l'intero menu, ma ogni singolo elemento di sinistra:

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

ecco il link al Codepen: http://codepen.io/anon/pen/bdzKYX

Answer 2

È necessario utilizzare le media query per questo, ad esempio:

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

Reference

Answer 3

Sta andando essere duro per risolvere questo in puro CSS, se non si conosce già le larghezze di le voci del menu, e anche in quel caso, dovresti continuare ad aggiornare le larghezze nelle query multimediali.

Ecco una soluzione di massima in 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); 
}); 

E 'un po' mosso sul mio browser, ma probabilmente si può costruire su questo per fare il ridimensionamento più agevole.

Fatemi sapere se avete domande.