[Решено] Верхнее меню

Тема в разделе "OpenCart", создана пользователем Ping, 20 июл 2015.

Статус темы:
Закрыта.
  1. Ping

    Ping PingWin always win Команда форума

    Регистрация:
    29 окт 2012
    Сообщения:
    443
    Симпатии:
    301
    Сайт - как сделать что бы при раскрытии верхнего меню оно было бы на ширину самого меню, не зависимо на какой пункт наведен курсор ?
    Как сделать маску в фоне при раскрытии меню ? Т.е меню раскрылось и сзади белый фон непрозрачный.
     
  2. Vivec

    Vivec

    Регистрация:
    24 ноя 2014
    Сообщения:
    105
    Симпатии:
    15
    костыль не самый лучший, но я его применял: через css каждый выпадающий блок позиционировал либо относительно левого либо относительно правого края с указания размеров там же
     
  3. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Придёться немного повозиться (особенно учитывая, что шаблон адаптивный).
    1.
    Код:
    .navbar-nav > li > .dropdown-menu
    Задаём здесь ширину для выпадающего блока равную ширине панели меню (для каждого медиаквери в отдельности, но только для тех, при которых меню в десктопном виде).
    2. Для выпадающего блока каждой из кнопок в отдельности задаём отрицательный отступ слева (для каждого блока нужно подобрать вручную):
    Код:
    left: -1111px;
    То есть, при раскрытии меню полностью закрыть всю остальную страницу7
     
    Ping нравится это.
  4. Ping

    Ping PingWin always win Команда форума

    Регистрация:
    29 окт 2012
    Сообщения:
    443
    Симпатии:
    301
    Именно так.
     
  5. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    Тут, конечно, с вёрсткой повезло в шблоне, меню идёт отдельным блоком.

    Нужно добавить тег для оверлея. Для меню (#menu) поставить z-index на единицу больше, чем у оверлея. И зацепиться за события дропдауна, чтоб показывать и скрывать оверлей:

    Код:
    $('.dropdown').on('show.bs.dropdown', function () {
      $('#overlay').show();
    });
    
    $('.dropdown').on('hide.bs.dropdown', function () {
      $('#overlay').hide();
    });
     
    Ping нравится это.
  6. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Добавить к каждой выпадающей фиче дополнительный класс и переопределить стили
    for (var tegsLi = document.getElementById ('menu').getElementsByClassName ('dropdown-menu'),
    j = 0, lj = tegsLi.length; j < lj; j++) tegsLi [j].className = 'dropdown-menu item-' + (j + 1);
     
    Lasted edited by : 21 июл 2015
    Ping нравится это.
  7. Ping

    Ping PingWin always win Команда форума

    Регистрация:
    29 окт 2012
    Сообщения:
    443
    Симпатии:
    301
    При помощи alex_storm и Dotrox вехнее меню заработало как надо. Теперь не понятно остался вопрос по поводу маски (фона) при открытии меню )
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    777
    А что там непонятного то? js код я написал, нужно только сделать div с id overlay и соответствующими стилями:
    Код:
    background: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    А для меню z-index 101.

    Я думал, с этим и так всё понятно.

    Кстати, у меня все выпадающие блоки меню выползают за левый край панели меню где-то на 22 пикселя (Мозилла, ширина экрана 1280).
     
    Ping нравится это.
  9. Ping

    Ping PingWin always win Команда форума

    Регистрация:
    29 окт 2012
    Сообщения:
    443
    Симпатии:
    301
    Супер, все работает ) только вместо белого фона добавил градиент.

     
Статус темы:
Закрыта.