Меню выпадает при наведении css

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

Интересное и привлекательное меню навигации имеет значительную роль для каждой веб-страницы. Такие меню важны для легкого доступа к вашей странице. Кроме этого, пользователям нравятся хорошо спроектированные веб-страницы.

В этой статье мы расскажем, как создать выпадающее меню навигации. А сейчас пошагово покажем, как создать интересное навигационное меню.

Есть три способа создания выпадающего меню с помощью Flash, JavaScript и CSS/HTML.

Мы покажем меню на основе CSS/HTML, так как оно имеет некоторые преимущества. Это самый легкий способ, а также имеет небольшой размер приложения.

Использование CSS/HTML — самый лучший метод, чтобы избежать конфликтов при JavaScript. Помимо этого, меню на основе CSS/HTML могут быть использованы многими.

1. Создайте HTML.

Как всегда мы начинаем с создания HTML.

div >ul li> a href="#">Главная страницаa> li> li> a href="#">Учебникиa> ul> li>a href="#">Изучите HTMLa>li> li>a href="#">Изучите CSSa>li> li>a href="#">Изучите JavaScripta>li> li>a href="#">Изучите PHPa>li> ul> li> li> a href="#">Тестыa> ul> li>a href="#" >Основы CSSa>li> li>a href="#">Основы PHPa>li> li>a href="#">Основы JavaScripta>li> ul> li> li> a href="#">Инструментыa> ul> li>a href="#">Геометрические изображенияa>li> li>a href="#">Color Pickera>li> li>a href="#">Генератор паролейa>li> li>a href="#">HTML редакторa>li> li>a href="#">Base 64a>li> ul> li> li> a href="#">Сниппетыa> ul> li>a href="#">CSSa>li> li>a href="#">JavaScripta>li> li>a href="#">Angulara>li> li>a href="#">Javaa>li> ul> li> li> a href="#">String Functionsa> ul> li>a href="#">Реверс строкиa>li> li>a href="#">URL кодерa>li> li>a href="#">Удаление пустых строкa>li> li>a href="#">Подсчет слов в строкеa>li> ul> li> ul>

Первая часть готова. А теперь продолжим и создадим красивое навигационное меню.

2. Добавьте CSS.

Теперь, когда у нас есть половина кода, можем добавить к нему стиль. С помощью CSS свойств создадим выпадающее меню.

• Установите для меню ширину и высоту с помощью свойств width и height.
• Установите z-index, чтобы убедиться, что навигационное меню будет находится поверх остальных элементов.
• Установите также цвет для всего меню с помощью свойства color. Можете выбрать цвет из нашего инструмента Color Picker.

#wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; >

• Установите свойство position в значение «absolute», чтобы навигационное меню не смещало остальные элементы вниз.

.navbar< height: 50px; padding: 0; margin: 0; position: absolute; >

• Расположите элементы меню по горизонтали сверху от страницы с помощью свойства float со значением «left».

.navbar li < height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; >

.navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; >

.navbar li:hover, a:hover < background-color: #444444; >

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

.navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; >

.navbar li ul li< background-color: #444444; >

.navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; >

А сейчас увидим, каким получилось выпадающее меню:

Пример

html> html> head> style> #wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; > .navbar< height: 50px; padding: 0; margin: 0; position: absolute; > .navbar li< height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; > .navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; > .navbar li:hover, a:hover < background-color: #444444; > .navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; > .navbar li ul li < background-color: #444444; > .navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; > style> head> body> h2>Создайте модальное окно h2> div id="wrap"> ul class="navbar"> li> a href="#">Главная страница a> li> li> a href="#">Учебники a> ul> li>a href="#">Изучите HTML a> li> li>a href="#">Изучите CSS a> li> li>a href="#">Изучите JavaScript a> li> li> a href="#">Изучите PHP a> li> ul> li> li> a href="#">Тесты a> ul> li>a href="#" >Основы CSS a> li> li>a href="#">Основы PHP a> li> li>a href="#">Основы JavaScript a> li> ul> li> li> a href="#">Инструменты a> ul> li>a href="#">Геометрические изображения a> li> li>a href="#">Color Picker a> li> li>a href="#">Генератор паролей a> li> li>a href="#">HTML редактор a> li> li> a href="#">Base 64 a> li> ul> li> li> a href="#">Сниппеты a> ul> li>a href="#">CSS a> li> li>a href="#">JavaScript a> li> li>a href="#">Angular a> li> li> a href="#">Java a> li> ul> li> li> a href="#">String Functions a> ul> li>a href="#">Реверс строки a> li> li>a href="#">URL кодер a> li> li>a href="#">Удаление пустых строк a> li> li>a href="#">Подсчет слов в строке a> li> ul> li> ul> div> body> html>

Рассмотрим другой пример выпадающего меню навигации:

Пример

html> html> head> title>Заголовок документа title> style> *< margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; > body< background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center; background-size: cover; min-height: 600px; font-family: 'Helvetica Neue', sans-serif; > nav< text-align: center; > .menu< display: inline-block; > .menu > li< float: left; color: #e298e1; width: 140px; height: 40px; line-height: 40px; background: rgba(0,0,0, 0.7); cursor: pointer; font-size: 17px; > .sub-menu< transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li< font-size: 14px; background: rgba(0,0,0, 0.8); padding: 8px 0; color: white; border-bottom: 1px solid rgba(255,255,255, 0.2); transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li:last-child< border-bottom: 0; > .sub-menu li:hover< background: black; > .menu > li:hover .sub-menu li< transform: scale(1); > .menu > li:hover .sub-menu< transform: scale(1); > style> head> body> nav> ul class="menu"> li> Италия ul class="sub-menu"> li>Рим li> li>Милан li> li>Венеция li> li>Лацио li> li>Флоренция li> ul> li> li> Франция ul class="sub-menu"> li>Париж li> li>Бурдо li> li>Марсель li> li>Тулуза li> ul> li> li> Испания ul class="sub-menu"> li>Мадрид li> li>Валенсия li> li>Барселона li> li>Севилья li> li>Бильбао li> ul> li> li> Россия ul class="sub-menu"> li>Москва li> li>Санкт-Петербург li> li>Тула li> li>Чехов li> ul> li> li> Германия ul class="sub-menu"> li>Берлин li> li>Мюнхен li> li>Франкфурт li> li>Гамбург li> li>Дрезден li> ul> li> ul> nav> body> html>

Источник

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

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

/* The container — 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

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Источник

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

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

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

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

Шаг 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 используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.

Источник