Skip to content

Instantly share code, notes, and snippets.

@FrankM1
Created June 5, 2014 01:41
Show Gist options
  • Save FrankM1/3cd803628df48a6c1622 to your computer and use it in GitHub Desktop.
Save FrankM1/3cd803628df48a6c1622 to your computer and use it in GitHub Desktop.
Space out menus evenly
(function($){
// Space out menu items evenly
$.fn.spaceNav = function() {
var mainMenu = $(this).find('.nav-collapse').find('.nav');
var weatherMenu = $(this).find('#nav-weather');
var menuItems = $(this).find('li');
var menuLinks = $(this).find('li').find('a');
//Undo flex menu
if(mainMenu.hasClass('has-flex')) {
mainMenu.removeClass('has-flex');
mainMenu.removeAttr('style');
mainMenu.flexMenu({undo:true});
}
// If the menu hasn't collapsed
if($(window).width() > 979) {
// Restore defaults
menuLinks.css({
paddingLeft : 7,
paddingRight: 7
})
// Get the widths
var containerWidth = $(this).find('.container').width();
var brandWidth = $(this).find('.brand').width() + 10; // Add 10 for the right padding on the logo
if ($(this).find('.ad-wrapper').is(":visible") ) {
var adWidth = 120;
} else {
var adWidth = 0;
}
// Count the number of nav items
var navCount = menuItems.length;
// Calculate available width for the nav to fit in
var availableWidth = containerWidth - (brandWidth+adWidth);
// Current width is primary menu plus weather menu plus extra for the border widths
var currentWidth = mainMenu.width() + weatherMenu.width() + navCount + 1;
// Calculate leftover width available for padding
var leftoverWidth = availableWidth - currentWidth;
// Divide leftover width amongst menu items and add back the 7 default to get padding
var padding = (Math.floor(leftoverWidth / (navCount*2)))+7;
// If there's not enough space activate flexMenu for overflow
if(availableWidth < currentWidth) {
mainMenu.addClass('has-flex').css({width:availableWidth - weatherMenu.width() - navCount - 1}).flexMenu();
// Otherwise set the padding
} else {
menuLinks.css({
paddingLeft : padding,
paddingRight: padding
});
}
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment