Стилизация выпадающего меню css

Как сделать — Выпадающее меню

Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:

Создать выпадающее меню

Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.

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

Пример

Объяснение примера

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

.

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

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.

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

Пример

/* Кнопка выпадающего списка */
.dropbtn background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover

/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content

/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn

Объяснение примера

Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.

Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).

Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).

Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.

Источник

Создаем выпадающее меню CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */ nav < margin: 100px 0; background-color: #E64A19; >/* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul < padding:0; margin:0; list-style: none; position: relative; >/* применяем inline-block позиционирование к элементам навигации */ nav ul li < margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; >/* стилизуем ссылки */ nav a < display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; >/* изменяем цвет фона при наведении курсора */ nav a:hover

После применения стилей у нас должно получиться нечто вроде этого:

внутрь элемента
для пункта, в котором нужно скрыть выпадающий список:

Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul < display: none; position: absolute; top: 100%; >/* отображаем выпадающий список при наведении */ nav ul li:hover > ul < display:inherit; >/* первый уровень выпадающего списка */ nav ul ul li

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):

Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :

/* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul

Если все сделано правильно, у вас должно получиться нечто вроде этого:

Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):

/* измените ‘ +’ на любой другой символ, если нужно */ li > a:after < content: ' +'; >li > a:only-child:after

Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.

Источник

Выпадающее меню css

Выпадающее меню можно встретить на большинстве таких сайтов как блоги, интернет магазины, на корпоративных сайтах и т.д.

Благодаря этому важнейшему элементу, посетитель с легкостью сможет перемещаться по сайту, а правильно продуманное меню также ускорит индексацию вашего интернет ресурса.

В рамках данной статьи мы рассмотрим, то как можно сделать такое меню. Поехали!

Этапы создания меню

Меню мы будем создавать в два этапа:

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

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

HTML разметка основного списка меню

Начинаем создание с разметки будущего меню:

• class=”menu” – этот класс нужен для стилизации фона нашего меню;
• class=”content” – данный класс необходим для того что бы наше меню не выходило за рамки контентной части всего сайта;
• class=”menu__wrapp” необходим для центрирования меню по центру страницы;
• class=”menu__list” нужен для того что бы убрать маленькие отступы между списком категорий;
• class=”menu__item” нужен для того что бы расположить элементы списка в строку, также внутри элемента с данным классом мы будем размещать список элементов выпадающего меню;
• class=”menu__link” с помощью этого класса мы будем стилизовать категории меню.

На данном этапе, без стилей, меню будет выглядеть вот так:

Стилизация меню

С разметкой закончили, а теперь нам необходимо добавить красоты для нашего меню.

Для начала добавим базовые стили нашего сайта:

Здесь я думаю все понятно.

Теперь переходим к нашему меню и для начала нам необходимо сделать так что бы список категорий был расположен не вертикально, а горизонтально. Это мы сможем сделать с помощью свойства “display” и “значения inline-block”

Если всмотреться, то мы можем увидеть маленький отступ между категориями. Что бы его убрать необходимо записать следующее:

Теперь добавим красоты нашему меню и расположим его по центру страницы:

.menu < width: 100%; height: auto; background-color: #282535; box-shadow: 0 0 20px -3px #282535; >.menu__wrapp < display: flex; justify-content: center; >.menu__link

Теперь добавим эффект при наведении на категории:

Проблема в том что данный эффект появляется быстро и не плавно, это можно исправить добавив свойство “transition” элементу с классом “.menu__link”

Теперь наше меню выглядит красиво и можно переходить к созданию выпадающего списка.

Создание выпадающего меню.

Первое что нам нужно, это создать разметку.

Выпадающий список будет появляться только в том случае если человек наведет курсор мыши на элемент с классом “.menu__item”, поэтому и помещать его мы будем в этот элемент сразу после ссылки с классом “.menu__link”:

Добавим элементу с классом “.menu__child-link” размер шрифта:

После всех проделанных манипуляций должно быть так:

Стилизация выпадающего списка

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

.menu__item < position: relative; display: inline-block; >.menu__child-wrapp

Результат выполнения вставленного кода:

После этого стилизируем выпадающий список и добавляем ему ховер эффект:

.menu__child-wrapp < position: absolute; width: 180px; height: auto; left: 50%; top: 45px; overflow: hidden; background-color: #e9e9e9; box-shadow: 3px 3px 27px -15px #282535; border-radius: 5px; transform: translateX(-50%); z-index: 1; >.menu__child-link < display: block; padding: 10px 5px; color: #282535; font-size: 18px; text-decoration: none; text-align: center; border-bottom: 1px solid #dddddd; transition: .3s; >.menu__child-link:hover

В итоге должно получится во так:

Последнее что нам нужно сделать, так это спрятать этот список и сделать его появление только после наведения курсора мыши на основную категорию.

Чтобы спрятать список, нам необходимо элементу с классом “.menu__child-wrapp” добавить “opacity: 0; top: -9999px;” и для плавного появления дописать “transition: opacity .4s;”

Такая запись «transition: opacity .4s;». означает то что необходимо анимировать только прозрачность элемента, а передвижение с верху будет происходить мгновенно и незаметно для нас.

Если вам интересно, то можете сами поэкспериментировать, сначала написать анимацию без значения opacity, а потом его дописать.

Теперь добавим ховер эффект для появления выпадающего меню:

.menu__item:hover .menu__child-wrapp

Вот и все, наше выпадающее меню полностью готово. Посмотреть на результат проделанной работы можно по этой ссылке:

Если эта статья была вам полезна, то подписывайтесь на новости блога что бы не пропускать новые, еще более интересные статьи!

Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации.

Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях или отправить на почту nd.webdew@gmail.com и я постараюсь ее для вас сделать. Спасибо за внимание и пусть баги будут фичами.

Поделиться статьей

Что известно о windows 10xНа выбранном диске находится таблица MBR-разделов

Источник