Есть ли способ центрировать меню при использовании плагина jQuery Mega Drop Down Menu?

Question

Я играю с этим плагином мегаменю jquery , и во всех примерах меню начинается с левой стороны экрана.

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

Answer 1

Редактируя CSS, вы можете изменить его стиль на «плавающий» в середине. Я проверил это с помощью Firebug на сайте, на котором приведен пример. Мне пришлось переопределить свойство width от 100% до фиксированной ширины, а затем добавить margin: 0 auto. auto - это магия, позволяющая центрироваться для создания плавного дизайна.

#megaMenu { /* This is the ul tag the contains the mega menu */
    width: 600px;
    margin: 0 auto;
}

Если вы предоставите пример собственной разметки, реализующей этот дизайн, мы можем помочь вам немного более точно его адаптировать. Взгляните на jsfiddle

Answer 2

, чтобы заставить его работать на меня, я взял оба ответа от Бромбомба и Чака Норриса и соединил их с модификацией, как показано ниже, чтобы избежать 2 проблем:

1. больше не нужно устанавливать фиксированную длину в CSS
2. также работает с элементами подменю

CSS

#megaMenu { /* This is the ul tag the contains the mega menu */
    margin: 0 auto;
}

jQuery с использованием дочернего селектора для суммирования только элементов главного меню и задания ширины:

var sum = 0;
$('#megaMenu > li').each(function () { sum += $(this).width(); });
$('#megaMenu').css("width", sum);

Answer 3

Есть несколько решений, которые вы можете сделать, чтобы достичь желаемого эффекта. Но, как вы упоминаете Jquery в тегах этого вопроса, я предлагаю сделать это с Jquery . Если вы используете плагин мега-меню, например,

$('#mega-menu-1').dcMegaMenu({
        rowItems: '3',
        speed: 0,
        effect: 'slide',
        event: 'click',
        fullWidth: true
    });

Вы можете добавить этот Javascript после этих строк, чтобы центрировать ваше меню.

var sum=0;
$('#mega-menu-1 li').each( function(){ sum += $(this).width(); });
$('#mega-menu-1 li:first').css("margin-left",($("#mega-menu-1").width()-sum)/2);

Это вычисляет сумму ширин элементов li и затем добавляет поле слева к первому элементу li.
Если на вашей странице ваши элементы li имеют некоторые границы или отступы, вы можете использовать функцию outerWidth () в Jquery вместо width() для вычисления этих пикселей.
Также спасибо за интересный плагин)

Answer 4

Это то, что вы ищете?

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu.html

Если правильно, вы можете добавить дополнительный код, используя параметр onLoad, который вычисляет поле и устанавливает CSS меню, когда менюзакончил инициализацию.Вы можете получить код либо из исходного кода демонстрации, либо загрузить рабочий образец по адресу:

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu-centered.zip

Answer 5

Вы можете настроить мегаменю на использование опции полной ширины - выпадающий раздел развернет всю ширину меню.

В противном случае позиция подменю рассчитывается на основе местоположенияродительской ссылки и доступной ширины слева / справа