как сделать выпадающее меню в html при наведении

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

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

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

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

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

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

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

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

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

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

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

В завершение

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

Источник

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

Ещё нужно убрать маркеры но это дело вкуса.

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

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

Вертикальное выпадающее меню

Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

Вот что должно получиться в результате. демка

Горизонтальное выпадающее меню

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

Вот что получиться в итоге демка.

Многоуровневое горизонтальное выпадающее меню

Вот так будет выглядеть наше многоуровневое меню демка.

Спасибо огромное! Задолбался

Спасибо огромное!
Задолбался я иcкать решение простое до нельзя, что бы было только нужное и больше ничего лишнего.
А то раздуют css непонятно чем. Здесь же все просто и локанично.

Интересно, а для Вордпресс

Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней «шелухи»!

HTML + CSS в чистом виде,

HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.

Очень полезная информация.

Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.

Возникнут вопросы обращайтесь

Возникнут вопросы обращайтесь. Чем смогу помогу.

Что-то мой комментарий не

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul. nav li:hover ul «
Подскажите, в чем дело?

Есть пожедания по изложению материала:

-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

-в частности, неясно, зачем нужна строка «

-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно «отношение к делу» они имеют.

Самый объёмный коммент.

Самый объёмный коммент.
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

Поправил статью с учётом

Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.

Спасибо за критику приходите к нам ещё

Меню некоректно отображается

Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?

Только что проверил в IE и

Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема

попробуйте заменить в head

попробуйте заменить в head полностью строчку с meta на

Источник

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

Раскрывающемся

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

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

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

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

Пример

Пример как работает

Используйте элемент контейнера (например,

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

Пример

/* Dropdown Button */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

— needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.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;
>

/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

Пример как работает

Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.

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

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

Источник

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

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

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1.

Способ 2.

Способ 3.

Способ 4.

Способ 5. С помощью jQuery

2. 3D выпадающее меню

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

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

3. Разворачивающееся выпадающее меню с логотипом

В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

4. Увеличивающееся выпадающее меню

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

5. Подъезжающее выпадающее меню

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

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

Источник

Узнать, как создать выпадающее меню с помощью CSS.

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

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

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

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

Пример

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

Используйте элемент контейнера (например,

Шаг 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

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

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

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

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

Выпадающий список с выравниванием по правому краю

Пример

Выпадающее меню в навигационной панели

Пример

Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.

Совет: Зайдите на наш учебник Кликабельный выпадающий, чтобы узнать больше о выпадающем кликабельном списке

Источник