0

私はスーパーフィッシュを使用して、自分のWebサイトに水平メニューを作成しています。

コンテンツは非常に動的であるため、メニュー項目は常に異なります。メニュー項目の幅は固定しないでください。

Webサイトの幅全体を埋めるのに十分なメニュー項目が表示されると、「その他の項目」という最後のメニューが表示されます。

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

問題は、これを実現するために特定のフォントに依存できないことです。フォントは、訪問者のマシンで利用できるものは何でも、そうである必要があります。

ご入力いただきありがとうございます

4

1 に答える 1

0

これを行う1つの方法があります...

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）に達したときに、それらのメニュー項目を返して、[その他の項目]メニューに追加できるようにします（最後のステップ） ）。

于 2011-12-30T18:29:27.330 に答える