2 * Supersubs v0.4b - jQuery plugin
3 * Copyright (c) 2013 Joel Birch
5 * Dual licensed under the MIT and GPL licenses:
6 * http://www.opensource.org/licenses/mit-license.php
7 * http://www.gnu.org/licenses/gpl.html
9 * This plugin automatically adjusts submenu widths of suckerfish-style menus to that of
10 * their longest list item children. If you use this, please expect bugs and report them
11 * to the jQuery Google Group with the word 'Superfish' in the subject line.
15 * This is not the original jQuery Supersubs plugin.
16 * Please refer to the README for more information.
19 (function($){ // $ will refer to jQuery within this closure
20 $.fn.supersubs = function(options){
21 var opts = $.extend({}, $.fn.supersubs.defaults, options);
22 // return original object to support chaining
23 // Although this is unnecessary due to the way the module uses these plugins.
24 for (var a = 0; a < this.length; a++) {
26 var $$ = $(this).eq(a),
28 o = $.meta ? $.extend({}, opts, $$.data()) : opts;
29 // Jump one level if it's a "NavBar"
30 if ($$.hasClass('sf-navbar')) {
31 $$ = $$.children('li').children('ul');
33 // cache all ul elements
34 var $ULs = $$.find('ul'),
35 // get the font size of menu.
36 // .css('fontSize') returns various results cross-browser, so measure an em dash instead
37 fontsize = $('<li id="menu-fontsize">—</li>'),
38 size = fontsize.attr('style','padding:0;position:absolute;top:-99999em;width:auto;')
39 .appendTo($$)[0].clientWidth; //clientWidth is faster than width()
43 // loop through each ul in menu
44 for (var b = 0; b < $ULs.length; b++) {
48 // If a multi-column sub-menu, and only if correctly configured.
49 if (o.multicolumn && $ul.hasClass('sf-multicolumn') && $ul.find('.sf-multicolumn-column').length > 0){
50 // Look through each column.
51 var $column = $ul.find('div.sf-multicolumn-column > ol'),
54 for (var d = 0; d < $column.length; d++){
55 resize($column.eq(d));
56 // New column width, in pixels.
57 var colWidth = $column.width();
58 // Just a trick to convert em unit to px.
59 $column.css({width:colWidth})
60 // Making column parents the same size.
61 .parents('.sf-multicolumn-column').css({width:colWidth});
63 mwWidth += parseInt(colWidth);
65 // Resizing the columns container too.
66 $ul.add($ul.find('li.sf-multicolumn-wrapper, li.sf-multicolumn-wrapper > ol')).css({width:mwWidth});
75 // get all (li) children of this ul
76 $LIs = $ul.children(),
77 // get all anchor grand-children
78 $As = $LIs.children('a');
79 // force content to one line and save current float property
80 $LIs.css('white-space','nowrap');
81 // remove width restrictions and floats so elements remain vertically stacked
82 $ul.add($LIs).add($As).css({float:'none',width:'auto'});
83 // this ul will now be shrink-wrapped to longest li due to position:absolute
84 // so save its width as ems.
85 var emWidth = $ul.get(0).clientWidth / size;
86 // add more width to ensure lines don't turn over at certain sizes in various browsers
87 emWidth += o.extraWidth;
88 // restrict to at least minWidth and at most maxWidth
89 if (emWidth > o.maxWidth) {emWidth = o.maxWidth;}
90 else if (emWidth < o.minWidth) {emWidth = o.minWidth;}
92 // set ul to width in ems
93 $ul.css({width:emWidth});
94 // restore li floats to avoid IE bugs
95 // set li width to full width of this ul
96 // revert white-space to normal
97 $LIs.add($As).css({float:'',width:'',whiteSpace:''});
98 // update offset position of descendant ul to reflect new width of parent.
99 // set it to 100% in case it isn't already set to this in the CSS
100 for (var c = 0; c < $LIs.length; c++) {
101 var $childUl = $LIs.eq(c).children('ul');
102 var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right';
103 $childUl.css(offsetDirection,'100%');
109 $.fn.supersubs.defaults = {
110 multicolumn: true, // define width for multi-column sub-menus and their columns.
111 minWidth: 12, // requires em unit.
112 maxWidth: 27, // requires em unit.
113 extraWidth: 1 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
115 })(jQuery); // plugin code ends