3

Приветствую. Есть такое меню, с обычным выпадающим списком:

введите сюда описание изображения

Как видим, это обычная подача с абсолютной позицией и выпадающими пунктами вниз. Однако, пунктов стало много и появилась необходимость сделать пункты в несколько колонок. Проблем с этим нет, задать position: relative для первого списка и сместить вложенный список влево со 100% шириной.

Итак, вопрос. Точнее 2 вопроса: 1) Как по средствам JS превратить выпадающий список в многоколоночную подачу?

введите сюда описание изображения

Сама стилистика прописана изначально, прописан column-width и column-gap. То есть, нужно определить ширину родителя и задать её для вложенного списка. С этим справится не сложно:

function resize(){$('#sub').width($('#nav').width())}resize();
$( window ).resize(function() {resize()});

Только вот меню будет идти не от начала родителя, так как position: relative задан для пункта списк в котором находится второй пункт.

введите сюда описание изображения

Как посчитать ширину пунктов впереди идущих и сместить выпадающий список в начало?

2) Опять же, по средствам JS, высчитать ширину впереди идущих пунктов и отнять от полученной ширины родителя. Чтоб получилось вот так:

введите сюда описание изображения

То есть, чем ближе пункт к краю, тем уже становится выпадающий список по ширине. Плюс, установить минимальное значение в 240рх. Добавляю код для примера с простым выпадающим списком для тестов:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu {
  position: relative;
  margin: 0 auto;
  display: table;
}

.menu li {
  float: left;
}

.menu li span {
  display: block;
  padding: 25px 18px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.85em;
  color: #555;
  cursor: pointer;
}

.menu .sub {
  position: relative;
}

.menu .sub ul {
  opacity: 0;
  visibility: hidden;
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  min-width: 240px;
  top: 100%;
  left: 0;
  position: absolute;
  padding: 20px;
  background: #333;
  margin-top: 10px;
  z-index: 9999;
}

.menu .sub ul:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #333;
}

.menu .sub:hover ul {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}

.menu .sub:hover ul:before {
  top: -7px;
}

.menu .sub ul li {
  float: none;
}

.menu .sub ul span {
  text-transform: none;
  font-weight: 400;
  padding: 10px;
  color: #ccc;
}

.menu .sub ul span:hover {
  color: #fff;
}
<ul class="menu">
  <li><a class="active" href="#"><span>Home</span></a></li>
  <li class="sub">
    <a href="#"><span>Wedding collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Design Haute Couture </span></a></li>
      <li><a href="#"><span>Crystal Sevilia Campaign</span></a></li>
      <li><a href="#"><span>Nora Naviano</span></a></li>
      <li><a href="#"><span>Naviblue</span></a></li>
      <li><a href="#"><span>Crystal Design Barcelona and Flower</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Innocentia</span></a></li>
      <li><a href="#"><span>Eva Santorini</span></a></li>
      <li><a href="#"><span>Eva Pink</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Lussano</span></a></li>
      <li><a href="#"><span>Ariamo</span></a></li>
      <li><a href="#"><span>Tesoro</span></a></li>
      <li><a href="#"><span>Lanesta</span></a></li>
      <li><a href="#"><span>Armonia</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Lite</span></a></li>
      <li><a href="#"><span>Eva Lendel</span></a></li>
      <li><a href="#"><span>Daniela Di Marino</span></a></li>
      <li><a href="#"><span>Monica Loretti</span></a></li>
      <li><a href="#"><span>Monica</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Tiara</span></a></li>
      <li><a href="#"><span>Serenada</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="#"><span>Evening collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Santorini Campaign</span></a></li>
      <li><a href="#"><span>Crystal Astoria Campaign</span></a></li>
      <li><a href="#"><span>Rebel</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Duet</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="/stuff/accesories/3"><span>Accesories</span></a>
    <ul>
      <li><a href="#"><span>Veils</span></a></li>
      <li><a href="#"><span>Jackets</span></a></li>
      <li><a href="#"><span>Boleroes</span></a></li>
      <li><a href="#"><span>Belts</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>Cooperation</span></a></li>
  <li><a href="#"><span>Contacts</span></a></li>
</ul>

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

PS: Повторюсь, что знаю о решении через CSS. Интересен именно вариант с использованием JS.

1 ответ 1

1

Чтобы выпадающего меню всегда совпадало по краю с основным, сдвинем его при помощи margin-left на нужное количество пикселей. Для этого подсчитаем координаты основного и выпадающего меню методом .offset().left и вычтем из координат основного координаты субменю — так мы получим отрицательное значение и присвоим его margin-left.

Для примера разбил субменю на 4 колонки. Добавил пунктам флексбокс-раскладку, с расположением в колонку и переносом. Осталось посчитать высоту для меню — для этого будем суммировать высоту каждого 4-го пункта (поскольку у нас 4 колонки) и затем присвоим ее субменю. Также нам нужна ширина, равная всему меню, потому возьмем ширину экрана — 100vw — и вычтем из неё расстояние до левого края экрана. Примем за аксиому, что меню центрируется, а значит слева и справа одинаковое расстояние, потому это расстояние просто умножаем на 2; в итоге получаем строку .width('calc(100vw - ' + menuOffset.left * 2 + 'px)').

Все эти операции делаем при событии mouseover (первая функция в .hover()) и добавляем в инлайн-стили субменю, при mouseout (вторая функция в .hover()) очищаем инлайн-стили.

$(function() {
  $('.sub').hover(function() {
    var menuOffset = $('.menu').offset();
    var subMenuOffset = $('ul', this).offset();
    var heightSum = 0;
    
    // так сдвигаем влево на уровень с меню выпадающее субменю
    $('ul', this).css('margin-left', menuOffset.left - subMenuOffset.left);
    
    $('li', this).each(function(index) {
      if(index % 4 == 0) heightSum += +$(this).height();
    });
    
    $('ul', this).height(heightSum).width('calc(100vw - ' + menuOffset.left * 2 + 'px)');
  }, function() {
    $('ul', this).removeAttr('style');
  });
});
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu {
  position: relative;
  margin: 0 auto;
  display: table;
}

.menu li {
  float: left;
}

.menu li span {
  display: block;
  padding: 25px 18px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.85em;
  color: #555;
  cursor: pointer;
}

.menu .sub {
  position: relative;
}

.menu .sub ul {
  opacity: 0;
  visibility: hidden;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  top: 100%;
  left: 0;
  position: absolute;
  padding: 20px;
  background: #333;
  margin-top: 10px;
  z-index: 9999;
}

.menu .sub ul li {
  width: 200px;
}

.menu .sub:before {
  content: '';
  position: absolute;
  left: calc(50% - 7px);
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #333;
  opacity: 0;
}

.menu .sub:hover ul {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}

.menu .sub:hover:before {
  opacity: 1;
}

.menu .sub:hover ul:before {
  top: -7px;
}

.menu .sub ul li {
  float: none;
}

.menu .sub ul span {
  text-transform: none;
  font-weight: 400;
  padding: 10px;
  color: #ccc;
}

.menu .sub ul span:hover {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li><a class="active" href="#"><span>Home</span></a></li>
  <li class="sub">
    <a href="#"><span>Wedding collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Design Haute Couture </span></a></li>
      <li><a href="#"><span>Crystal Sevilia Campaign</span></a></li>
      <li><a href="#"><span>Nora Naviano</span></a></li>
      <li><a href="#"><span>Naviblue</span></a></li>
      <li><a href="#"><span>Crystal Design Barcelona and Flower</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Innocentia</span></a></li>
      <li><a href="#"><span>Eva Santorini</span></a></li>
      <li><a href="#"><span>Eva Pink</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Lussano</span></a></li>
      <li><a href="#"><span>Ariamo</span></a></li>
      <li><a href="#"><span>Tesoro</span></a></li>
      <li><a href="#"><span>Lanesta</span></a></li>
      <li><a href="#"><span>Armonia</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Lite</span></a></li>
      <li><a href="#"><span>Eva Lendel</span></a></li>
      <li><a href="#"><span>Daniela Di Marino</span></a></li>
      <li><a href="#"><span>Monica Loretti</span></a></li>
      <li><a href="#"><span>Monica</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Tiara</span></a></li>
      <li><a href="#"><span>Serenada</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="#"><span>Evening collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Santorini Campaign</span></a></li>
      <li><a href="#"><span>Crystal Astoria Campaign</span></a></li>
      <li><a href="#"><span>Rebel</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Duet</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="/stuff/accesories/3"><span>Accesories</span></a>
    <ul>
      <li><a href="#"><span>Veils</span></a></li>
      <li><a href="#"><span>Jackets</span></a></li>
      <li><a href="#"><span>Boleroes</span></a></li>
      <li><a href="#"><span>Belts</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>Cooperation</span></a></li>
  <li><a href="#"><span>Contacts</span></a></li>
</ul>

Альтернативный вариант, где от JS требуется только сдвинуть субменю влево и задать ширину:

$(function() {
  $('.sub').hover(function() {
    var menuOffset = $('.menu').offset();
    var subMenuOffset = $('ul', this).offset();
    
    // так сдвигаем влево на уровень с меню выпадающее субменю
    $('ul', this).css('margin-left', menuOffset.left - subMenuOffset.left);
    
    $('.sub ul').width($('.menu').width()); 
  }, function() {
    $('ul', this).removeAttr('style');
  });
});
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu {
  position: relative;
  margin: 0 auto;
  display: table;
}

.menu li {
  float: left;
}

.menu li span {
  display: block;
  padding: 25px 18px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.85em;
  color: #555;
  cursor: pointer;
}

.menu .sub {
  position: relative;
}

.menu .sub ul {
  opacity: 0;
  visibility: hidden;
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  min-width: 240px;
  top: 100%;
  left: 0;
  position: absolute;
  padding: 20px;
  background: #333;
  margin-top: 10px;
  z-index: 9999;
}

.menu .sub ul li {
  width: 200px;
}

.menu .sub:before {
  content: '';
  position: absolute;
  left: calc(50% - 7px);
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #333;
  opacity: 0;
}

.menu .sub:hover ul {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}

.menu .sub:hover:before {
  opacity: 1;
}

.menu .sub:hover ul:before {
  top: -7px;
}

.menu .sub ul li {
  float: none;
}

.menu .sub ul span {
  text-transform: none;
  font-weight: 400;
  padding: 10px;
  color: #ccc;
}

.menu .sub ul span:hover {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li><a class="active" href="#"><span>Home</span></a></li>
  <li class="sub">
    <a href="#"><span>Wedding collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Design Haute Couture </span></a></li>
      <li><a href="#"><span>Crystal Sevilia Campaign</span></a></li>
      <li><a href="#"><span>Nora Naviano</span></a></li>
      <li><a href="#"><span>Naviblue</span></a></li>
      <li><a href="#"><span>Crystal Design Barcelona and Flower</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Innocentia</span></a></li>
      <li><a href="#"><span>Eva Santorini</span></a></li>
      <li><a href="#"><span>Eva Pink</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Lussano</span></a></li>
      <li><a href="#"><span>Ariamo</span></a></li>
      <li><a href="#"><span>Tesoro</span></a></li>
      <li><a href="#"><span>Lanesta</span></a></li>
      <li><a href="#"><span>Armonia</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Lite</span></a></li>
      <li><a href="#"><span>Eva Lendel</span></a></li>
      <li><a href="#"><span>Daniela Di Marino</span></a></li>
      <li><a href="#"><span>Monica Loretti</span></a></li>
      <li><a href="#"><span>Monica</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Tiara</span></a></li>
      <li><a href="#"><span>Serenada</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="#"><span>Evening collections</span></a>
    <ul>
      <li><a href="#"><span>Crystal Santorini Campaign</span></a></li>
      <li><a href="#"><span>Crystal Astoria Campaign</span></a></li>
      <li><a href="#"><span>Rebel</span></a></li>
      <li><a href="#"><span>Oksana Mukha</span></a></li>
      <li><a href="#"><span>Pollardi</span></a></li>
      <li><a href="#"><span>Mary</span></a></li>
      <li><a href="#"><span>Dominiss</span></a></li>
      <li><a href="#"><span>Duet</span></a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="/stuff/accesories/3"><span>Accesories</span></a>
    <ul>
      <li><a href="#"><span>Veils</span></a></li>
      <li><a href="#"><span>Jackets</span></a></li>
      <li><a href="#"><span>Boleroes</span></a></li>
      <li><a href="#"><span>Belts</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>Cooperation</span></a></li>
  <li><a href="#"><span>Contacts</span></a></li>
</ul>

6
  • Спасибо. Теперь стало понятна вторая часть скрипта. А для чего было так усложнять разбивку на колонки? Ведь там был column-width, то есть, достаточно было задашь ширину и начальную позицию выпадающего блока, остальное все само выстраивалось. И как насчет кроссбраузерности? Сам стиль calc не дружит с многими браузерами. 14 апр 2017 в 8:38
  • С колонками у меня так и не получилось сделать, у них не до конца подвластный моему пониманию контекст форматирования ) Колонки на флексе гораздо более управляемы и понятны (а также кроссбраузерны). Что касается кроссбраузерного использования calc(), то из десктопных браузеров его не поддерживает совсем ИЕ8-. Вы все еще это поддерживаете? 14 апр 2017 в 8:49
  • Можно колонки и на flexbox использовать. Это не существенно, просто было интересно, для чего усложнять подачу разбивкой на колонки через JS. Ведь так получится намного короче, только теперь треугольник нужно сместить к пункту. И проще редактировать. Добавил класс в пункт списка и количество колонок выпадающего блока в нем изменилось, а так все формируется через скрипт и гибкость пропадает. 14 апр 2017 в 8:58
  • Это да, тут я немного перемудрил, не надо ночью на вопросы начинать отвечать :-) Слишком буквально воспринял, что все надо сделать при помощи JS. 14 апр 2017 в 9:03
  • 1
    Теперь понял, почему вы не использовали .resize, не сразу обратил внимание на .hover. Правда тогда нужно $('ul', this).removeAttr('style'); заменить на $('ul').removeAttr('style');. Так как после наведения ширина выпадающего блока останется и появится прокрутка. Так же, нужно учитывать внутренний отступ, из-за него ширина получается на 40px больше. Плюс, я бы все же сделал через resize, так как длинный список вниз может создавать прокрутку на невысоких страницах. В общем, по той же ссылке можете глянуть. Еще раз спасибо за помощь! 14 апр 2017 в 11:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.