Как сверстать sidebar c вложенными несколькими рубрикаим?

Учусь верстать и вот наткнулся на такой sidebar
5b522a92bef5f835671199.png
я предположил, что можно сделать как-то вот так https://jsfiddle.net/ju5sxkq4/21/
но это как то не рационально, если вдруг так будет не 5 постов, а 10 или 15, то будет много кода.
  • Вопрос задан
  • 460 просмотров
Решения вопроса 1
@saintluka
Несовсем понятно о чем вопрос.

Если именно о количестве постов – можно ограничить блок, в котором они лежат по высоте и задать ему overflow-y: auto, чтобы появилась вертикальная прокрутка.

Если вопрос о жаваскрипте, то вот мое решение https://jsfiddle.net/hd2jz365/28/

В чем состоит основная идея – мы же знаем, что каждому заголовку будет соответствовать свой список постов, следовательно количество элементов sidebar-top__text будет равно кол-ву элементов sidebar-bottom.
Далее, что sidebar-top__text, что sidebar-bottom будут иметь по два состояния: активный/неактивный.
Активный sidebar-top__text будет выделен цветом, а активный sidebar-bottom будет просто отображен (по-умолчанию display: none).
Так-как используем БЭМ, создаем соответствующие модификаторы.

Всего этого достаточно, чтобы сократить и сделать код более универсальным:
– избавляемся от классов popular, popular-sb, recent, recent-sb, comments и т. д.. Классы должны быть максимально абстрактны, не привязываться к контенту
– вешаем обработчик клика на sidebar-top__text и далее следующий сценарий:
• сохраняем ссылку на элемент, по которому кликнули
• у элементов sidebar-top__text удаляем класс-модификатор
• добавляем класс-модификатор на элемент, по которому кликнули
• получаем порядковый номер (индекс) элемента, по которому кликнули
• у элементов sidebar-bottom удаляем класс-модификатор
• элементу sidebar-bottom с порядковым номером, полученным выше добавляем класс-модификатор

Еще немного поменял тэги, чтобы семантично)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы