Примеры раскрывающегося меню 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>

Источник

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

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

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

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

Шаг 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 ? Пожалуйста, расскажите об этом в комментариях.

Источник