CSS выпадающее меню
Используйте CSS, чтобы создать дисплей после перемещения мыши на эффект выпадающего меню.
Примеры в раскрывающемся меню
Примеры Demo 1
Этот учебник
www.w3big.com
Примеры демо 2
Примеры Demo 3
Базовая раскрывающемся меню
Когда мышь перемещается к указанным элементам, опустятся появится меню.
примеров
.dropdown {
позиция: относительная;
Дисплей: встроенный блок;
}
.dropdown-контента {
Дисплей: нет;
позицию: абсолютная;
цвет фона: # f9f9f9;
мин-ширина: 160px;
коробка-тень: 0px 8px 16px 0px RGBA (0,0,0,0.2);
обивка: 12px 16px;
Z-индекс: 1;
}
.dropdown: парить .dropdown-контент {
Дисплей: блок;
}
</ Стиль>
<Div класс = "раскрывающимся">
<SPAN> Наведите курсор мыши на меня </ SPAN>
<Div класс = "выпадающий-контент ">
<P> Hello World! </ P>
</ Div>
</ Div>
Попробуйте »
Примеры аналитических
HTML часть:
Мы можем использовать любой из HTM, элементы, чтобы открыть выпадающее меню, например: <SPAN> или элемент <кнопка>.
Используйте элемент контейнера (например: <DIV>), чтобы создать выпадающее меню и разместить в любом месте вы хотите надеть.
Используйте элемент <div>, чтобы обернуть эти элементы, а также использовать CSS, чтобы установить содержание стиля выпадающего.
CSS часть:
.dropdown класс использует position:relative , которое будет установлено содержание выпадающее меню помещается в раскрывающемся кнопки (используя position:absolute ) в правом нижнем углу позиции.
.dropdown-content класса является фактическое раскрывающемся меню. По умолчанию скрыт, появится в мыши перемещается к указанному элементу после. Обратите внимание , что min-width задано значение 160px. Вы можете свободно изменять его. Примечание: Если вы хотите установить раскрывающийся и раскрывающиеся кнопки широкополосного контента последовательного, установите width до 100% ( overflow:auto настройка может прокрутить небольшой размер экрана).
Мы используем box-shadow свойство позволяет выпадающее меню , которое выглядит как "карты" .
:hover селектор для выпадающего меню пользователя появится , когда мышь перемещается в раскрывающемся кнопки.
Выпадающее меню
Создайте выпадающее меню, и позволяет пользователю выбрать элемент в списке:
Приведенные выше примеры подобных случаев, когда мы добавим ссылку в раскрывающемся списке, и установить стиль:
примеров
/ * Style Кнопка выпадающий * /
.dropbtn {
цвет фона: # 4CAF50;
цвет: белый;
обивка: 16px;
размер шрифта: 16px;
границы: нет;
курсор: указатель;
}
/ * Контейнер <DIV> - вам нужно найти раскрывающихся содержание * /
.dropdown {
позиция: относительная;
Дисплей: встроенный блок;
}
/ * Содержание Pulldown (по умолчанию скрыта) * /
.dropdown-контента {
Дисплей: нет;
позицию: абсолютная;
цвет фона: # f9f9f9;
мин-ширина: 160px;
коробка-тень: 0px 8px 16px 0px RGBA (0,0,0,0.2);
}
/ * Меню Link выпадающие * /
.dropdown-контента а {
цвет: черный;
обивка: 12px 16px;
текст-отделка: нет;
Дисплей: блок;
}
/ * После редактирования раскрывающемся меню цвета при наведении ссылки * /
.dropdown-контента: с зависать {фон -Колор: # f1f1f1}
/ * После показа в раскрывающемся меню парить * /
.dropdown: парить .dropdown-контент {
Дисплей: блок;
}
/ * Когда содержимое раскрывающегося списка после раскрывающегося меню отображает измененный цвет фона * /
.dropdown: парить .dropbtn {
цвет фона: # 3e8e41;
}
</ Стиль>
<Div класс = "раскрывающимся">
Кнопка <класс = "dropbtn"> в раскрывающемся меню </ кнопка>
<Div класс = "выпадающий-контент ">
<A HREF = "#"> Этот учебник 1 </ а>
<A HREF = "#"> Этот учебник 2 </ а>
<A HREF = "#"> Этот учебник 3 </ а>
</ Div>
</ Div>
Попробуйте »
Выравнивание содержимого выпадающий
плавать: слева;
плавать: право;
Если вы хотите , чтобы настроить выпадающее меню с плавающей нужный контент находится справа налево , а не слева направо, вы можете добавить следующий код right: 0;
Другие примеры
Изображение выпадающий
Этот пример демонстрирует, как добавить картину того, как ниспадающего меню.
Опуститесь навигацию
Этот пример демонстрирует, как добавить на панели навигации в раскрывающемся меню.