72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
|
/*
|
||
|
|
* 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();
|