/* * Greedy Navigation * * http://codepen.io/lukejacksonn/pen/PwmwWV * */ var $nav = $('#site-nav'); var $btn = $('#site-nav button'); var $vlinks = $('#site-nav .visible-links'); var $hlinks = $('#site-nav .hidden-links'); var breaks = []; function updateNav() { var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30; // The visible list is overflowing the nav if($vlinks.width() > availableSpace) { // Record the width of the list breaks.push($vlinks.width()); // Move item to the hidden list $vlinks.children().last().prependTo($hlinks); // Show the dropdown btn if($btn.hasClass('hidden')) { $btn.removeClass('hidden'); } // The visible list is not overflowing } else { // There is space for another item in the nav if(availableSpace > breaks[breaks.length-1]) { // Move the item to the visible list $hlinks.children().first().appendTo($vlinks); breaks.pop(); } // Hide the dropdown btn if hidden list is empty if(breaks.length < 1) { $btn.addClass('hidden'); $hlinks.addClass('hidden'); } } // Keep counter updated $btn.attr("count", breaks.length); // Recur if the visible list is still overflowing the nav if($vlinks.width() > availableSpace) { updateNav(); } } // Window listeners $(window).resize(function() { updateNav(); }); $btn.on('click', function() { $hlinks.toggleClass('hidden'); $(this).toggleClass('close'); }); updateNav();