74 lines
2.8 KiB
JavaScript
74 lines
2.8 KiB
JavaScript
|
/*
|
||
|
|
* sf-AutomaticWidth v1.0b - Automatically adjusts the menu width for the jQuery Superfish plugin.
|
||
|
|
*
|
||
|
|
* Developer's note:
|
||
|
|
* Built as a part of the Superfish project for Drupal (http://drupal.org/project/superfish)
|
||
|
|
* Found any bug? have any cool ideas? contact me right away! http://drupal.org/user/619294/contact
|
||
|
|
*
|
||
|
|
* jQuery version: 1.3.x or higher.
|
||
|
|
*
|
||
|
|
* Dual licensed under the MIT and GPL licenses:
|
||
|
|
* http://www.opensource.org/licenses/mit-license.php
|
||
|
|
* http://www.gnu.org/licenses/gpl.html
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function($){
|
||
|
|
$.fn.sfautomaticwidth = function(){
|
||
|
|
function automaticWidth(menu){
|
||
|
|
// This plugin is not useful for vertical menus.
|
||
|
|
if (menu.hasClass('sf-horizontal') || menu.hasClass('sf-navbar')){
|
||
|
|
// Adding a helper class.
|
||
|
|
// Making the main UL as wide as its container.
|
||
|
|
menu.addClass('sf-automatic-width').css('width','100%');
|
||
|
|
var
|
||
|
|
// We need the inner width of the main UL.
|
||
|
|
menuWidth = menu[0].clientWidth,
|
||
|
|
// Selecting only the first level parents.
|
||
|
|
children = menu.children('li'),
|
||
|
|
// Number of children.
|
||
|
|
childrenNumber = children.length,
|
||
|
|
// Calculating the total width of the children based on their outer width.
|
||
|
|
childrenWidth = 0;
|
||
|
|
for (var a = 0; a < childrenNumber; a++) {
|
||
|
|
// Resetting the children width and getting its outer width then.
|
||
|
|
childrenWidth += children.eq(a).css({width:''}).outerWidth(true);
|
||
|
|
}
|
||
|
|
// Is the menu container wider than the menu?
|
||
|
|
// (It'll be more flexible in later versions.)
|
||
|
|
if (menuWidth > childrenWidth) {
|
||
|
|
var
|
||
|
|
// Calculating how much width should be added to each first level parent.
|
||
|
|
difference = (((menuWidth - childrenWidth) * 100) / menuWidth) / childrenNumber;
|
||
|
|
for (var a = 0; a < childrenNumber; a++){
|
||
|
|
var
|
||
|
|
child = children.eq(a),
|
||
|
|
// Calculating and applying the new width to the item.
|
||
|
|
autoWidth = (((child[0].clientWidth * 99.8) / menuWidth) + difference) + '%';
|
||
|
|
child.css({width:autoWidth});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Reset the widths if the menu became narrower than its children.
|
||
|
|
if (menuWidth < childrenWidth) {
|
||
|
|
for (var a = 0; a < childrenNumber; a++){
|
||
|
|
children.eq(a).css({width:''});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Return original object to support chaining.
|
||
|
|
// Although unnecessary because of the way the module uses these plugins.
|
||
|
|
for (var b = 0; b < this.length; b++) {
|
||
|
|
var menu = $(this).eq(b);
|
||
|
|
automaticWidth(menu);
|
||
|
|
var timer;
|
||
|
|
$(window).resize(function(){
|
||
|
|
clearTimeout(timer);
|
||
|
|
timer = setTimeout(function(){
|
||
|
|
automaticWidth(menu);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
})(jQuery);
|