Узнать, как создать меню с горизонтальной прокруткой используя HTML, CSS.
Меню с горизонтальной прокруткой
Главная
Новости
Контакты
О нас
Поддержка
Блог
Инструменты
База
Пользовательский
Еще
Логотип
Друзья
Партнеры
Люди
Работа
Создать меню с горизонтальной прокруткой
Шаг 1) Добавить HTML:
<div class="scrollmenu">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
<a href="#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 Навигации, чтобы узнать больше о навигационных панелях.