スーパーフィッシュ水平メニュー。どのように幅を測定する

Question

私は私のウェブサイト上に水平メニューを作成するためにスーパーフィッシュを使用しています。

コンテンツは非常に動的なので、メニュー項目は常に変化します。メニュー項目の幅は固定してはいけません。

ウェブサイトの幅全体を埋めるのに十分なメニューアイテムが表示された場合、「その他のアイテム」という最後のメニューが表示されます。

表示される項目を制限できるように、各メニュー項目（liタグ）の幅を測定するにはどうすればよいですか？

問題は、これを達成するために特定のフォントに依存できないということです。フォントは、ビジターマシンで使用できるものでなければなりません。あなたの入力

Answer 1

ここでは、これを行うための一つの方法だため

おかげで...

example jsfiddle

$(function() { 
    $('.sf-menu').superfish(); 

    var tempWidth = 0, 
     // width of our layout minus width of our "More Items..." menu 
     maxWidth = $('#container').outerWidth() - $('#more').outerWidth(); 

    // get any menu items that extend past our maxWidth 
    var $moreItems = $('.sf-menu > li').not('#more').filter(function() { 
     tempWidth += $(this).outerWidth(); 
     if (tempWidth >= maxWidth) return true; 
     else return false; 
    }); 

    // if we have items extending past, add those items to "More Items..." 
    if ($moreItems.length > 0) { 
     $('#more').show().find('ul').append($moreItems); 
    } else { 
     $('#more').hide(); 
    } 
}); 

はその中間セグメントでは、私は、各メニュー項目の幅を合計していますしきい値が満たされたとき（maxWidth）、メニュー項目を「More Items」メニューに追加できるように戻します（最終ステップ）