Как создать: горизонтальный скроллинг меню

Узнайте, как использовать CSS для создания горизонтального скроллинг меню.

Home News Contact About Support Blog Tools Base Custom More Logo Friends Partners People Work

Попробуйте сами

Как создать горизонтальный скроллинг меню

Шаг 1 - Добавить HTML:

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  ...
</div>

Шаг 2 - Добавить CSS:

Секрет того, чтобы сделать навигационную панель прокручиваемой, это использовать overflow:auto и white-space:nowrap:

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

Попробуйте сами

Соответствующие страницы

Урок:CSS-навигационная панель