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

Question

EvgenyBalalaev @EvgenyBalalaev

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

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

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

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

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

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

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

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

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

Вопрос задан более трёх лет назад
1613 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 5

1 комментарий

EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

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

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

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

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

Написано более трёх лет назад

5 комментариев

EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

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

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

Написано более трёх лет назад
leni_m @leni_m

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

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

Написано более трёх лет назад
leni_m @leni_m

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

Написано более трёх лет назад

14 комментариев

EvgenyBalalaev @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 @one_day

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

Написано более трёх лет назад
one_day @one_day

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

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

Сейчас я просто все пункты меню обернул в контейнер: wrapper
И написал вот эти свойства:
.wrapper { background-color: pink; height: 200px; width: 800px; }

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

Буду рад ещё мыслям и решениям.
Спасибо.
Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

Написано более трёх лет назад
one_day @one_day

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

Написано более трёх лет назад
one_day @one_day

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

Написано более трёх лет назад

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 @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 @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 @one_day

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

Написано более трёх лет назад

3 комментария

EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

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

Написано более трёх лет назад
Дмитрий Васюков @dmitryvasyukov

EvgenyBalalaev:

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

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

Написано более трёх лет назад
EvgenyBalalaev @EvgenyBalalaev Автор вопроса

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

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

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

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

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 2 часа назад
- 19 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 3 часа назад
- 33 просмотра
0

ответов
JavaScript

Простой
По какой логике bind принимает только первый контекст?
- 1 подписчик
- 3 часа назад
- 57 просмотров
2

ответа
HTML

+1 ещё

Простой
Как добавить разный фон в ::before для объектов с одинаковым стилем?
- 1 подписчик
- 3 часа назад
- 11 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 4 часа назад
- 22 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- 4 часа назад
- 23 просмотра
0

ответов
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 5 часов назад
- 47 просмотров
1

ответ
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- 6 часов назад
- 35 просмотров
3

ответа
JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 7 часов назад
- 23 просмотра
0

ответов
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 11 часов назад
- 50 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

15000 руб./за проект

8266 f12 требуется сделать ревью и оптимизировать работу

26 апр. 2024, в 20:42

2000 руб./за проект

Доработать и интегрировать модуль на WordPress

26 апр. 2024, в 19:53

5000 руб./за проект

Answer 1 · 2017-08-21 14:11:58

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

Answer 2 · 2017-08-21 14:11:39

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

Answer 3 · 2017-08-21 14:31:34

one_day @one_day

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

Ответ написан более трёх лет назад

14 комментариев

Answer 4 · 2017-08-21 20:33:52

Дмитрий Васюков @dmitryvasyukov

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

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

Ответ написан более трёх лет назад

3 комментария

Answer 5 · 2020-05-29 07:47:43

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт