Приветствую. Есть такое меню, с обычным выпадающим списком:
Как видим, это обычная подача с абсолютной позицией и выпадающими пунктами вниз. Однако, пунктов стало много и появилась необходимость сделать пункты в несколько колонок. Проблем с этим нет, задать 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.