Question

I’m using superfish with the supersubs plugin plugin for my main navigation. That works perfect, except of one little problem. Some of the Submenu-ULs contain font-icons, that are embeded in i-tags, others don’t.
I think, the problem is, that the supersub plugin reads the width of the ULs on pageload and the icons aren’t loaded at this point. So the script gets the wrong UL-width, which results in line break, due to the submenu being too small.

Now I’m trying to check, wheter a submenu-Ul contains a font icon or not, and want to add some extra width to the specific UL in case of an icon.

Below you see the supersubs plugin with my code in between, that is not working. The code is placed in the “each”-lop, that reads everey UL including it’s childs and adds some CSS to the elements in order to get the ULs-width.

How do I determine, wheter an UL contains an i-tag?

Thanks
Lukas

// Initialize Supersubs Plugin
function supersubs_init(){
    $(document).ready(function(){
        $("ul.sf-menu").supersubs({
            minWidth:    13,
            maxWidth:    25,
            extraWidth:  1
        });
    });
}

jQuery(function($){

$.fn.supersubs = function(options){
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
    // return original object to support chaining
    return this.each(function() {
        // cache selections
        var $$ = $(this);
        // support metadata
        var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
        // get the font size of menu.
        // .css('fontSize') returns various results cross-browser, so measure an em dash instead
        var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
            'padding' : 0,
            'position' : 'absolute',
            'top' : '-999em',
            'width' : 'auto'
        }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
        // remove em dash
        $('#menu-fontsize').remove();
        // cache all ul elements
        $ULs = $$.find('ul');
        // loop through each ul in menu
        $ULs.each(function(i) {
            var $s_ul = $ULs;
            // cache this ul
            var $ul = $ULs.eq(i);
            // get all (li) children of this ul
            var $LIs = $ul.children();
            // get all anchor grand-children
            var $As = $LIs.children('a');
            // force content to one line and save current float property
            var liFloat = $LIs.css('white-space','nowrap').css('float');
            // remove width restrictions and floats so elements remain vertically stacked
            // check if font icons are being displayed and add extra width
            var emWidth = $ul.add ($LIs).add($As).css({
                'float' : 'none',
                'width' : 'auto'
            })
            // this ul will now be shrink-wrapped to longest li due to position:absolute
            // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
            .end().end()[0].clientWidth / fontsize;
            // add more width to ensure lines don't turn over at certain sizes in various browsers


            // !!! THIS IS NOT WORKING !!!
            if($($ULs + 'i[class^="icon-"]').length != 0){
                emWidth += o.extraWidth + 1.25;
            }
            else{
                emWidth += o.extraWidth;
            }

            // restrict to at least minWidth and at most maxWidth
            if (emWidth > o.maxWidth)       { emWidth = o.maxWidth; }
            else if (emWidth < o.minWidth)  { emWidth = o.minWidth; }
            emWidth += 'em';
            // set ul to width in ems
            $ul.css('width',emWidth);
            // restore li floats to avoid IE bugs
            // set li width to full width of this ul
            // revert white-space to normal
            $LIs.css({
                'float' : liFloat,
                'width' : '100%',
                'white-space' : 'normal'
            })
            // update offset position of descendant ul to reflect new width of parent
            .each(function(){
                var $childUl = $('>ul',this);
                var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
                $childUl.css(offsetDirection,emWidth);
            });
        });

    });
};
// expose defaults
$.fn.supersubs.defaults = {
    minWidth        : 13,       // requires em unit.
    maxWidth        : 25,       // requires em unit.
    extraWidth      : 2         // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
};
});

Answer 1

For the record, this CSS rule may probably had done it. (Untested)

ul.sf-menu > li [class^="icon-"] {
  display: inline-block;
  width: 1.25em;
}​

UPDATE

According to OP, this worked for him:

ul.sf-menu > li [class^="icon-"] {
  margin-right: 4px;
  display: inline-block;
  vertical-align: baseline;
}