Menüeinträge einzeln im Fenster ausblenden Größe ändern

Question

Ich arbeite an einer Navbar bestehend aus einem Logo & Menü-Elemente links schweben und eine Suchleiste & eine Dropdown-Taste schwebt rechts. Wenn das Browserfenster eine bestimmte Größe erreicht, springen die Navigationselemente in die nächste Zeile, da nicht mehr genügend Platz vorhanden ist.

Werfen Sie einen Blick hier: http://codepen.io/anon/pen/YXBaEK

Statt eine neue Zeile zu beginnen ich jeden Menüpunkt one-by-one verschwinden möchte, wenn der horizontale Raum heraus läuft. (Ich habe immer noch die Menülinks in einem Dropdown-Menü neben der Suchleiste).

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

Sie

EDIT für Ihre Hilfe danken: Die Anzahl und der Inhalt der Menüpunkte sind nicht statisch. Ich weiß nicht, wie viele es sein werden und was drinnen geschrieben ist.

Answer 1

Ich habe es funktioniert nur mit CSS. Die Menüpunkte werden in die nächste Zeile umgeleitet, aber das Nav hat eine feste Größe mit Überlauf: versteckt, damit Sie sie nicht sehen.

Ich habe einen Codepen mit meiner Lösung gemacht. Die wichtigsten Änderungen sind: die nav auf feste Höhe ändern:

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

und den Suchbegriff vor dem Menü bewegen

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

und dann schwebte ich nicht das ganze Menü, sondern jedes einzelne Element zu links:

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

hier ist der Link zum Codepen: http://codepen.io/anon/pen/bdzKYX

Answer 2

Sie benötigen Medienanfragen für das, zum Beispiel zu verwenden:

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

Reference

Answer 3

Es wird schwer sein, zu lösen diese in reinem CSS, wenn Sie nicht bereits wissen, die Breiten die Menüpunkte, und selbst dann müssten Sie die Breiten in den Media-Abfragen aktualisieren.

Hier ist eine grobe Lösung 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); 
}); 

Es ist ein bisschen abgehackt in meinem Browser, aber Sie können sich wahrscheinlich auf diese bauen das Ändern der Größe glatter.

Lassen Sie mich wissen, wenn Sie Fragen haben.