С помощью стандартной прокрутки и пары улучшений.
Для начала сверстаем горизонтальное меню:
<!-- index.html -->
<menu class="menu">
<li class="menu-item">
<a href="#">Новости</a>
</li>
<li class="menu-item">
<a href="#">Проекты</a>
</li>
<li class="menu-item">
<a href="#">Книги</a>
</li>
<!-- ... -->
</menu>
/* style.css */
.menu {
display: flex;
font: 24px/32px Bureausans, Arial, sans-serif;
}
.menu-item {
margin-right: 12px;
}
.menu-item:last-child {
margin-right: 0;
}
Теперь поместим меню в блок с ограниченной шириной и горизонтальной прокруткой:
<!-- index.html -->
<div class="menuLimiter">
<menu class="menu">
<li class="menu-item">
<a href="#">Новости</a>
</li>
<li class="menu-item">
<a href="#">Проекты</a>
</li>
<li class="menu-item">
<a href="#">Книги</a>
</li>
<!-- ... -->
</menu>
</div>
/* style.css */
.menuLimiter {
width: 350px;
padding: 0 10px;
/* Зададим возможность горизонтальной прокрутки */
overflow-x: scroll;
/* Для Сафари дополнительно зададим инерцию при прокрутке.
С инерцией меню будет «оттягиваться» при попытке прокрутить
его за его пределы. */
-webkit-overflow-scrolling: touch;
}
/* ... */
При прокрутке появляется горизонтальный скроллбар. В коротком меню он нам ни к чему, спрячем его:
<!-- index.html -->
<div class="menuWrapper">
<div class="menuLimiter">
<menu class="menu">
<li class="menu-item">
<a href="#">Новости</a>
</li>
<li class="menu-item">
<a href="#">Проекты</a>
</li>
<li class="menu-item">
<a href="#">Книги</a>
</li>
<!-- ... -->
</menu>
</div>
</div>
/* style.css */
.menuLimiter {
/* ... */
/* Добавим дополнительный нижнее поле
элементу, в котором прокручивается меню */
padding-bottom: 20px;
/* С помощью отрицательного отступа
компенсируем «нарощенное» поле */
margin-bottom: -20px;
}
.menuWrapper {
/* Спрячем всё, что выходит за границы родителя */
overflow: hidden;
}
Добавим немного косметики в виде «забеления» по краям с помощью маски:
/* style.css */
.menuLimiter {
/* ... */
mask-image: linear-gradient(
90deg,
transparent 0, rgba(0, 0, 0, .25) 9px,
#000 18px,
#000 calc(100% - 18px),
rgba(0, 0, 0, .25) calc(100% - 9px),
transparent
);
}
Осталась одна проблема. При некоторых ширинах экрана меню обрезается так, что кажется, что всё поместилось и прокручивать нечего:
Чтобы поправить это, можно написать небольшой скрипт, который будет анализировать ширину элементов и расставлять их так, чтобы один из элементов всегда обрезался. Но так как наше меню довольно статичное, просто опишем подходящие отступы для разной ширины экрана:
/* style.css */
@media only screen and (max-width: 400px) {
.menu-item { margin-right: 18px; }
}
@media only screen and (max-width: 426px) {
.menu-item { margin-right: 8px; }
}
@media only screen and (max-width: 450px) {
.menu-item { margin-right: 9px; }
}
@media only screen and (max-width: 470px) {
.menu-item { margin-right: 18px; }
}
@media only screen and (max-width: 510px) {
.menu-item { margin-right: 18px; }
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.