Superfish горизонтальное меню. Как измерить ширину - PullRequest
Новая
       36

Superfish горизонтальное меню. Как измерить ширину

0 голосов
/ 30 декабря 2011

Я использую Superfish для создания горизонтального меню на моем сайте.

Пункты меню всегда будут меняться, так как содержимое очень динамичное. Пункты меню не должны иметь фиксированную ширину.

Когда отображается достаточное количество пунктов меню для заполнения всей ширины веб-сайта, отображается последнее меню под названием «Больше элементов».

Как мне измерить ширину каждого пункта меню (тега li), чтобы я мог ограничить отображаемые элементы?

Проблема в том, что я не могу зависеть от определенного шрифта для достижения этой цели. Шрифты должны быть такими, какие есть на компьютере посетителей.

Спасибо за ваш вклад

1 Ответ

0 голосов
/ 30 декабря 2011

Вот один из способов сделать это ...

пример 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), я возвращаю эти пункты меню, чтобы я мог добавить их в меню «Больше элементов» (в последний шаг)

...