Как можно сверстать данную часть макета?

Question

[Кирилл]

Всем привет. Занимаюсь вёрсткой небольшого макета, большую часть я успешно закончил и адаптировал под многие разрешения экрана, однако не знаю, как можно сверстать данный элемент.

(Макет называется "WP-Meliora")
Как видно на фотографии, он состоит из заголовка и навигации. Опустим заголовок, я включил его в красный квадрат для того, чтобы дать понять, что он является частью "шапки". Вопрос в том, что я не знаю, как сверстать подобную навигацию.

Сказать, что я понял принцип его работы - ничего не сказать. У меня всего два варианта, где первый - стрелка листает список в ту одну из сторон, а второй - стрелка переключает пункт на следующий (что-то, вроде кнопки "следующий").

Вот то, как я сделал без кнопок в навигации (кнопок нет вообще, список будет слайдиться благодаря "overflow-x: auto" (когда список полностью не помещается на экране):

Живая страница: ghetter.github.io/experiment

Так что именно я хочу знать? Хотелось бы понять, как именно верстать подобные блоки, каким тегом обозначать эти кнопки, и как верстать "список" в навигации?

Answer 1

[Кирилл]

Всем привет. Спасибо @Bumighator-у за его ответ. Решение, представленное в обсуждении не очень подходит под мои нужды. Однако, это теперь не важно. Я совсем позабыл о том, что вместе с макетом предлагается live-preview версия сайта, свёрстанная авторами макета. И вот теперь, взглянув на код, стало понятно, что навигация выполнена в стиле слайдера, а стрелки предназначены для горизонтального пролистывания этого слайдера, в зависимости от направления ("далее" и "назад"). Всем спасибо за внимание!

Comments

[Alexander Baumgarten]

Рад слышать, что решение нашлось! Удачи в вёрстке!

Answer 2

[Alexander Baumgarten]

Если я правильно понимаю ваш вопрос и сам таск, кнопки «влево» и «вправо» выполняют похожую функцию с кнопками на классический каруселях. То бишь банально переключают по одному объекту либо влево, либо вправо. В данном случае передают псевдокласс «:checked» от активного к следующему.
Как возможное решение можете попробовать прописать каждую кнопку импутом типа «радио»:
<input type=“radio”>

Чтобы работали стрелки влево и вправо для переключения вкладок, можно назначить каждой кнопке своё имя и сделать проверку состояния «:checked» у каждой из кнопок через js. Мне сложно сказать, есть ли решение лучше, чем if else проверка, не шибко я в js разбираюсь, может кто поправит. Выглядит топорно, но в теории сработать должно.

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

Comments

[Максим]

ссылка не рабочая