Как создать горизонтальное меню с прокруткой для сайта?

В этой статье мы пошагово рассмотрим как создать горизонтальное меню с прокруткой и добавить к нему несколько улучшений, которые позволят отображать активный элемент по центру и прокручивать меню с помощью удерживания кнопки мыши.
Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.
Создание разметки
HTML-структура меню:
<div class="nav-scroller"> <nav class="nav-scroller__items"> <a class="nav-scroller__item" href="#">Start</a> <a class="nav-scroller__item" href="#">Icons</a> <a class="nav-scroller__item" href="#">Docs</a> <a class="nav-scroller__item" href="#">Support</a> <a class="nav-scroller__item" href="#">Plans</a> <a class="nav-scroller__item" href="#">Blog</a> <a class="nav-scroller__item" href="#">Sign in</a> </nav> </div>
Вид горизонтального меню с прокруткой без стилей:

Написание CSS кода меню
1. Зададим стили для .nav-scroller
, .nav-scroller__items
и .nav-scroller__item
:
.nav-scroller { overflow-y: hidden; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-scroller__items { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .nav-scroller__item { color: #424242; display: flex; padding: 0.5rem 1.25rem; text-decoration: none; }
Список используемых свойств:
overflow-y: hidden
- скрываем контент, который будет выходить за нижнюю границу элемента.nav-scroller
;background-color: #fff
- устанавливаем цвета фона.nav-scroller
;box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
- добавляем тень к.nav-scroller
;display: flex
- делаем элемент flex-контейнером;overflow-x: auto
- разрешаем прокрутку по горизонтали, она будет доступна при необходимости;white-space: nowrap
- запрещаем переносить текст на новую строку, даже если он не помещается в ней;
На этом этапе меню будет иметь следующий вид:

2. Добавим правую границу ко всем элементам кроме последнего:
.nav-scroller__item:not(:last-child) { border-right: 1px solid #eee; }

3. Выделим другим цветом фона активный пункт меню:
.nav-scroller__item_active { background-color: #fff59d; }
Указание активного пункта меню будем выполнять посредством добавления к нему класса nav-scroller__item_active
.

4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:
/* для всех пунктов кроме активного */ .nav-scroller__item:not(.nav-scroller__item_active):hover { background-color: #f5f5f5; } /* для активного пункта */ .nav-scroller__item_active:hover { background-color: #fff176; }

Вот так довольно просто можно создать меню с горизонтальной прокруткой.
Горизонтальная прокрутка будет появляться только тогда, когда пункты не будут помещаться в контейнер. Перемещение по меню в этом случае будет осуществляться посредством бегунка полосы прокрутки или смахиванием (свайпом влево или вправо) на сенсорных устройствах.

Улучшения для меню с горизонтальной прокруткой
1. Выравнивание активного пункта по центру
Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:
document.addEventListener('DOMContentLoaded', () => { const $navItems = document.querySelector('.nav-scroller__items'); const $navItemActive = $navItems.querySelector('.nav-scroller__item_active'); if (!$navItemActive) { return; } const navItemsRect = $navItems.getBoundingClientRect(); const navItemActiveRect = $navItemActive.getBoundingClientRect(); const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2; $navItems.scrollLeft = navItemsLeft; });
Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active
оказывался если это возможно по центру.

2. Прокручивания меню с помощью удерживания кнопки мыши
В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).
Для этого в CSS добавим следующий код:
.nav-scroller__items::-webkit-scrollbar { display: none; }
Это правило выключит отображение полосы прокрутки.
После этого на страницу подключим файл dragscroll.js
:
<script defer src="js/dragscroll.js"></script>
Добавим класс dragscroll
к прокручиваемому элементу:
<div class="nav-scroller"> <nav class="nav-scroller__items dragscroll"> <a class="nav-scroller__item" href="#">Start</a> <a class="nav-scroller__item" href="#">Icons</a> <a class="nav-scroller__item" href="#">Docs</a> <a class="nav-scroller__item nav-scroller__item_active" href="#">Support</a> <a class="nav-scroller__item" href="#">Plans</a> <a class="nav-scroller__item" href="#">Blog</a> <a class="nav-scroller__item" href="#">Sign in</a> </nav> </div>

Если нужно на клиенте, то для этого достаточно написать следующий скрипт: