Как сделать такие разделители в меню, как у Wildberries?

Question

[EvgenyBalalaev]

Здравствуйте.
Есть задача:
Сделать меню как у вайлбериз в топе Магазин Вайлбериз.
Нужны такие же пункты меню с разделителями.

Данный шаблон будет ставиться потом на OpenCart.
Особенного данного меню заключается в том, что в начале нет разделителя и в конце меню нет разделителя, но это решается (один из способов) путём first- и last-child.

Посмотрел код у вайлдбериз, там реализация сделана путём добавления дополнительных li со свойствами content: "точка".

Сложность у меня возникла вот в чём:

1. Как сделать так, чтобы эти li-разделители появлялись ТОЛЬКО между пунктами меню?
2. При этом эти li-разделители НЕ должны появляться у крайних элементов меню (смотрите конец первой строчки меню на Вайлдбериз и начало второй строчки).

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

А как решить вопрос с разделителями? Тут без js не разберёшься, но пока не могу сообразить даже принцип и логику реализации.

Помогите пожалуйста.
Спасибо.

Answer 1

[Александр Карпов]

Там примерно так https://jsfiddle.net/jvsc4yoj/
Выводить всегда (в цикле php например)
а так вы можете скрыть последний пункт https://jsfiddle.net/jvsc4yoj/1/ чтобы не заморачиваться с php

Comments

[EvgenyBalalaev]

Спасибо за ответ, с кодом вайлдбериз-то я разобрался, есть мысли, что там жёстко завёрстано меню и добавлять/убирать через админку там можно, но нужно как-то нужно править разделители, не исключаю что у них там есть тумблеры в админке, которые можно щёлкать и добавлять/убирать разделители по обеим сторонам пунктов меню, причём по-отдельности =)

Вы предложили вариант, где указывается цикл в php, причём не только вывод пункта меню созданного в админке, но и следом вставка разделителя. Но как узнать какой пункт перескочит и окажется крайним слева во второй строчке? И как узнать какой именно пункт окажется крайним справа в первой строчке?
Ведь количество символоф и пунктов может быть вообще разным, ведь создаются пункты меню клиентом и через админку.

Может быть есть какой-то способ через js решить?
Например js отлавливает каким-то образом именно крайние элементы и чистит after...(ВОТ ЭТО Я НЕ ЗНАЮ КАК РЕАЛИЗОВАТЬ И МОЖНО ЛИ ВООБЩЕ КАК-ТО?) но при этом js должен содержать правила для first-child и last-child всего меню (ЭТО Я ЗНАЮ КАК РЕАЛИЗОВАТЬ, МОЖНО И НА ЧИСТОМ CSS). А так же js должен содержать правило, где будет чекать крайний элемент каждой новой строчки, чтобы чистить не after, а before...

Или проще в админку тумблеры вывести и пусть клиент сам выбирает где ставить, а где нет?
Потому что так или иначе я буду разделители выводить в админку, чтобы админ сайта могу менять символы и цвет этих разделителей.

Спасибо, жду советов, если есть мысли!=)

Answer 2

[leni_m]

Думаю подсчитывать ширину пунктов меню + разделителей. Если больше какого-то значения(т.е. новая строчка) соответственно не добавлять разделитель.

Comments

[EvgenyBalalaev]

Тут всё проблема в том, что будет всё с админки выводиться с помощью php.
Следовательно никому неизвестно будет какая ширина у пунктов + разделителей.
Например: "Главная" - одна ширина, а "Одежда для новорождённых" - совсем другая.
Вы в ответе имели в виду переноса пункта меню, наверное, чтобы он не выходил за пределы контейнера.
Это решается просто - делается контейнер для меню, ну li ставится свойство, которое не даёт перенести двусловные и больше пункты меню, разбив при этом пункт меню на части (точнее просто вёрстка поедет). То есть свойство сделает любой li одним целым и если какой-то li уже не будет влазить по ширине, то он весь перенесётся на новую строчку.

Но как угадать какой именно перенесётся? Тут как-то js должен помочь. Ведь тот, который остался на первой строчке с краю справа, НЕ ДОЛЖЕН иметь разделителя справа. И тот, который перепрыгнул на вторую строчку и стоит с краю слева, тоже НЕ ДОЛЖЕН иметь разделителя слева!

За ответ спасибо, будут ещё мысли - буду рад выслушать =)
Если нужны пояснения - обновлю пост темы. Дайте знать.

[leni_m]

я ничего про php и не писал, все на js делается. Например пункты меню с класом lol, а разделители с классом lalka. В цикле проходимся по ним, и там где ширина будет больше контейнера(следовательно пункт упадет на новую строчку) не добавлять разделитель. Ну я думаю направление вы поняли)

[EvgenyBalalaev]

leni_m: да, это идея, надо посмотреть =)

А можете js накидать тут сейчас? Я просто в js слаб и задумку понял, но как закодить - не знаю(
Если, конечно, не сложно, leni_m =)

[leni_m]

да я сам не особо шарю, для такого кода мне надо довольно много времени) так что извиняй.

[EvgenyBalalaev]

leni_m: хорошо, спасибо за ответы!)

Answer 3

[one_day]

https://codepen.io/one_day/pen/vJRvzm

Comments

[EvgenyBalalaev]

Здравствуйте.
Спасибо за ответ.
Да, такое решение я реализовывал, тут вы реализовали путём вывода точки в before именно пункта меню li, без создания дополнительных li. Способ хороший.
Но как избавиться от точек, при переносе строки (перенос не вошедших li)?
Допустим у меня не 4 пункта меню, а 30 пунктов и везде разное количество знаков в названиях. Все пункты центрируются в контейнере. Так или иначе все li-пункты меню в одну строчку не встанут, они будут перескакивать на новую строчку и это рандомно будет происходить, то есть мы изначально не знаем какой по счёту пункт меню перескочит. Поэтому избавиться от точки в начале пункта, который перескочил на новую строчку - невозможно.
Но надо решить эту задачу как-то.

Вот, вставьте в свой код вот это и убедитесь, что на новой строчке у первого пункта есть точка, а её не должно быть:

ТУТ КОД, КОТОРЫЙ НУЖНО ВСТАВИТЬ ВМЕСТО ВАШЕГО КОДПЕН

<div class="wrapper">
  <ul class="menu">
    <li>пункт 1
      <ul class="submenu">
        <li>подпункт 1</li>
        <li>подпункт 2</li>
        <li>подпункт 3</li>
      </ul>
    </li>
    <li>пункт 2
        <ul class="submenu">
        <li>подпункт 4</li>
        <li>подпункт 5</li>
        <li>подпункт 6</li>
      </ul>
    </li>
    <li>пункт 3
          <ul class="submenu">
        <li>подпункт 7</li>
        <li>подпункт 8</li>
        <li>подпункт 9</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
    <li>пункт 4
          <ul class="submenu">
        <li>подпункт 10</li>
        <li>подпункт 11</li>
        <li>подпункт 12</li>
      </ul>
    </li>
  </ul>
</div>

.wrapper {
  background-color: pink;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 500px;
  text-align: center;
}

ul.menu>li {
  display: inline-block;
}

ul.menu>li:not(:first-child):before {
  content: '•';
  margin: 0 10px;
  font-size: 14px;
}

ul.submenu {
  position: absolute;
  display: none;
}

ul.menu>li:hover ul.submenu {
  display: block;
}

[one_day]

обновил
https://codepen.io/one_day/pen/vJRvzm

[one_day]

Сравниваем положение всех пунктов меню с первым относительно левого края, если положение совпадает, значит на новой строчке - добавляем класс nodots у которого display:none; т.е. скрываем точку)

[EvgenyBalalaev]

one_day: посмотрел, но по-сути это не решает главного вопроса, попробую сейчас подробней и с картинками в посте своём всё описать.

Сейчас я просто все пункты меню обернул в контейнер: wrapper
И написал вот эти свойства:

.wrapper {
  background-color: pink;
  height: 200px;
  width: 800px;
}

Соответственно обилие пунктов начали занимать свободное место и переноситься на новую строчку. А те, которые перескочили на ночую строчку и стоят скраю слева, они имеют точки, но не должны их иметь по задумке.
Сложность в том, что мы НЕ знаем какой именно пункт меню перескочит, т.к. в одном пункте меню может быть 3 буквы, а в каком-то 30...думаю смысл понятен.

Буду рад ещё мыслям и решениям.
Спасибо.

[EvgenyBalalaev]

one_day: ответил ранее до того, как увидел пояснение =)
Да, метод хороший, но тут получается надо добавить ещё ширину самой точки и марджини с падингами (которые нужно будет тогда задать жёстко, что не очень хотелось бы, но не критично).
Как я понял, сравнивание положений сигнализирует о том, что какой-то пункт меню перескочил на новую строчку и именно этот пункт меню должен лишиться точки, верно?
Тогда потом надо жёстко стопорнуть js именно на этот пункт, чтобы не чекал его.

[EvgenyBalalaev]

one_day, выше там в комментариях leni_m предложил реализовать путём проверки ширины пунктов меню li + разделитель на соответствие ширине контейнера.
И если какой-то пункт меню в купе со всеми будет превышать ширину, то JS будет засекать именно этот пункт меню и будет чистить у него before, а у предыдущего чистить after.
Как-то так это можно реализовать?
Если да, то можете помочь с кодом? А то мои познания JS очень малы.(
Буду очень благодарен Вам!

[one_day]

Вот теперь должно работать!)
https://codepen.io/one_day/pen/yoKwOM

[one_day]

теперь сравниваем с верхним положением, если не совпадает, значит перешли на новую строчку, добавляем класс и перезаписываем положение

[EvgenyBalalaev]

one_day: да, очень даже супер!)
Единственное что - только в статике работает.
То есть если я ширину экрана буду менять или поменяю ширину контейнера в коде, то не срабатывает.
Надо, в общем ещё проверки на ширину экрана добавлять.

[EvgenyBalalaev]

one_day: хотя код же, вроде, так или иначе всё-равно проверять должен.
Ладно, буду дальше думать, как допилить =)

[one_day]

можно что-нибудь типа такого сделать:

$(window).resize(function() {
newtop = $("ul.menu li:first").offset().top;
$( "ul.menu>li" ).each(function() {
  if ($(this).offset().top != newtop ) {
    $(this).addClass('nodots');
newtop = $(this).offset().top;
  } else {
    $(this).removeClass('nodots');
  }
})
});

[EvgenyBalalaev]

one_day: эхх, вот выдержка из документации jQuery:

Additional Notes:

The number returned by dimensions-related APIs, including .offset(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.

Сказано, что при изменении ширины и т.д., .offset ведёт себя некорректно =(

[EvgenyBalalaev]

one_day извиняюсь что снова беспокою, посидел и изучил ещё раз ХТМЛ этого меню и увидел такой li, с классом row-divider.
Как я понимаю он там не зря.
Возможно логика там такая:
Пока пунктов меню мало и они все влезают в одну строчку, этот row-divider отсутствует (полностью отсутствует в DOM).
Как только какой-то элемент перескочил на новую строчку, JS чекает высоту контейнера топ-меню и она, уже, очевидно, больше чем высота одного li.
Тогда JS создаёт li class: "row-divider".
И в таком случае у нас вёрстка принимает вид:

HTML

<ul>
  <li></li>
  <li></li>
  <li class="row-divider"></li>
  <li></li>
  <li></li>
</ul>

И уже тут JS идёт к этому роу-девайдер + 1 и у него меняет стили.

Возможно это как-то можно и нужно оптимизировать.
Вы вроде спец по JS, могли бы помочь с написанием кода?)
Спасибо!=)

[one_day]

EvgenyBalalaev:
предложили один из вариантов решения, но мы ушли другим путем и будем допиливать)
https://codepen.io/one_day/pen/PKajjv

Answer 4

[Дмитрий Васюков]

чтобы у крайних элементов меню небыло "точек" достаточно сделать так

.element:last-child {
 list-style:none;
}

Comments

[EvgenyBalalaev]

Спасибо за ответ, но я про это написал в своём посте и спрашивал про другие разделители.
Проблем убрать какие-либо стили у крайних элементов всего массива - не проблема. Так же как и афтеры и бефоры подчистить.
А как убрать разделители у тех элементов, которые стоят СКРАЮ у контейнера?
То есть перескочил пункт меню на новую строчку, т.к. контейнер тесный стал и ему нужно убрать разделитель.

Посмотрите топ меню у вайлдбериз. Но там, как мне кажется, просто жёстко заверстали и добавлять - убирать новый пункты меню нельзя...
А мне хотелось бы в динамике всё сделать, т.к. пунктов меню может быть от одного и до очень много и разной ширине (разное количество символов).

[Дмитрий Васюков]

EvgenyBalalaev:

Есть такой псевдо класс, он называется nth-of type()

Так вот достаточно указать и для него это свойство
.element:nth-of-type(номер элемента) {
list-style:none;
}

[EvgenyBalalaev]

Дмитрий Васюков: Дмитрий, я знаю о псевдоклассе и в посте-вопросе написал суть проблемы, так же в комментариях-ответах тут несколько раз рассказал о задаче.
Чуть позже дополню свой пост с примерами и картинками, чтобы ещё более наглядно было.

Суть такая:
Пункты меню будут разной ширины и этих пунктов меню будет НЕИЗВЕСТНО сколько, т.к. клиент будет создавать эти пункты меню из админки и сколько ему взбредёт в голову создать ,столько и будет.
Но по вёрстке у топ меню есть определённая ширина (для конкретного медиа-запроса своя ширина контейнера будет).
Соответственно, какой-то пункт меню рано или поздно перескочит на новую строчку, когда пунктам меню будет тесно на одной строчке в рамках ширины контейнера.
Это логичное поведение.
НО!!! ВНИМАНИЕ ВОПРОС!!!
Как узнать какой по счёту пункт меню перескочил на новую строчку и уже ему И ТОЛЬКО ЕМУ задавать стили???
Ведь если бы я знал точно, например, при железной вёрстке, то я бы так и сделал через лэст и фёрст чайлд, ну и нтх чайлд, ну или нтх оф тайп.

Посмотрите на топ меню у вайлдбериз, там всё ясно и понятно.
Первый и второй элемент можно лишить стилей через CSS. А как быть с последним элементом в первой строчке и первым элементом во второй строчке меню?
Как засечь то, что какой-то рандомный элемент рано или поздно соскочил на новую строчку и ЕМУ НУЖНО убрать лист-стайл, ну или класс и т.д., не суть...

Надеюсь сейчас понятней объяснил!=)

Answer 5

[SteveenGer]

У wildberries всё гораздо проще, на чистом css.
::after {
border-bottom: 1px dashed #ccc;
bottom: 5px;
content: '';
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}