Как сделать вертикальное меню css

Как сделать — Вертикальное меню

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

Вертикальное меню

Как создать вертикальную группу кнопок

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

Пример

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

Пример

.vertical-menu <
width: 200px; /* Установите ширину, если хотите */
>

.vertical-menu a <
background-color: #eee; /* Серый цвет фона */
color: black; /* Черный цвет текста */
display: block; /* Сделайте так, чтобы ссылки отображались друг под другом */
padding: 12px; /* Добавьте отступ */
text-decoration: none; /* Удалить подчеркивание из ссылок */
>

.vertical-menu a:hover <
background-color: #ccc; /* Темно-серый фон при наведении курсора мыши */
>

.vertical-menu a.active <
background-color: #04AA6D; /* Добавить зеленый цвет к "активной/текущей" ссылке */
color: white;
>

Вертикальное прокручиваемое меню

Установите определенную высоту с помощью height и добавьте свойство overflow , если вам нужно меню с вертикальной прокруткой (скроллингом):

Пример

Совет: Ознакомтесь с главой Как сделать — Боковая навигация на нашем сайте W3Schools на русском, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту страницы.

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Как сделать — Вертикальное меню

.vertical-menu a <
background-color: #eee; /* Серый цвет фона */
color: black; /* Черный цвет текста */
display: block; /* Сделайте так, чтобы ссылки располагались друг под другом */
padding: 12px; /* Добавить немного отступа */
text-decoration: none; /* Удалить подчеркивание из ссылок */
>

.vertical-menu a:hover <
background-color: #ccc; /* Темно-серый фон на наведении курсора мыши */
>

.vertical-menu a.active <
background-color: #4CAF50; /* Добавить зеленый цвет "активная/текущая" ссылки */
color: white;
>

Вертикальное прокрутка меню

Установите определенный height и добавить свойство overflow , если вы хотите меню вертикальной прокрутки:

Пример

Совет: Проверьте наши учебник Как сделать — Боковую панели навигации чтобы узнать, как создать фиксированную, полноразмерную боковую навигацию.

Вертикальное меню для сайта

Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка <li>. </li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>. </ul> , который в свою очередь занимает всю ширину его блока-контейнера.

Элементы списка <li>. </li> могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

  • Содержание:

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

2. Вертикальное меню в стиле &#171;схема метро&#187;

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. &#171;Ветка метро&#187; &#8212; левая граница списка, маркеры генерируются перед каждой ссылкой.

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *