92 lines
2 KiB
JavaScript
92 lines
2 KiB
JavaScript
/*
|
|
* Greedy Navigation
|
|
*
|
|
* http://codepen.io/lukejacksonn/pen/PwmwWV
|
|
*
|
|
*/
|
|
|
|
var $nav = $('#site-nav');
|
|
var $btn = $('#site-nav #toggle-nav');
|
|
var $vlinks = $('#site-nav .visible-links');
|
|
var $hlinks = $('#site-nav .hidden-links.links-menu');
|
|
|
|
var breaks = [];
|
|
|
|
function updateNav() {
|
|
|
|
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 80;
|
|
|
|
// 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() {
|
|
if($hlinks.is(":visible")){
|
|
$hlinks.addClass('hidden');
|
|
$btn.removeClass('close');
|
|
} else {
|
|
$hlinks.removeClass('hidden');
|
|
$('.lang-menu').addClass('hidden');
|
|
$btn.addClass('close');
|
|
$('.lang-selector').removeClass('close');
|
|
}
|
|
});
|
|
|
|
// Language selector button
|
|
$('.lang-selector').on('click', function() {
|
|
if($('.lang-menu').is(":visible")){
|
|
$('.lang-menu').addClass('hidden');
|
|
$('.lang-selector').removeClass('close');
|
|
} else {
|
|
$('.lang-menu').removeClass('hidden');
|
|
$('.lang-selector').addClass('close');
|
|
$hlinks.addClass('hidden');
|
|
$btn.removeClass('close');
|
|
}
|
|
});
|
|
|
|
updateNav();
|