Hide menu items one-by-one on window resize

Question

I'm working on a navbar consisting of a logo & menu-items floating left and a searchbar & a dropdown-button floating right. When the browser window reaches a certain small size the navbar elements will start to jump into the next row, because there isn't enough space anymore.

Have a look here: http://codepen.io/anon/pen/YXBaEK

Instead of starting a new row I'd like every menu item to disappear one-by-one if the horizontal space is running out. (I still have the menu links in a dropdown menu next to the search bar).

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

Thank you for your help

EDIT: The number and the content of the menu items are not static. I dont know how many there will be and whats written inside.

Answer 1

I got it working only with CSS. The menu items will break to the next line, but the nav has a fixed size with overflow: hidden, so you'll not see them.

I made a Codepen with my solution. The main changes are: change the nav to fixed height:

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

and move the search item in front of the menu

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

and then I floated not the whole menu but every single item to left:

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

here's the link to the Codepen: http://codepen.io/anon/pen/bdzKYX

Answer 2

It's going to be hard to solve this in pure CSS, if you don't already know the widths of the menu items, and even then, you would have to keep updating the widths in the media queries.

Here's a rough solution 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);
});

It's a bit choppy on my browser, but you can probably build on this to make the resizing smoother.

Let me know if you have questions.

Answer 3

You need to use media queries for that, for example:

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

Reference