С помощью стандартной прокрутки и пары улучшений.

Для начала сверстаем горизонтальное меню:

<!-- 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы