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

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

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

  value="value1">Option 1  value="value2">Option 2  value="value3">Option 3

Этот код создаст выпадающий список с тремя опциями: «Option 1», «Option 2» и «Option 3». Каждая опция будет иметь значение, указанное в атрибуте value .

Чтобы обработать изменение выбранной опции, можно использовать атрибут onChange элемента и добавить JavaScript-обработчик события. Например:

 onChange="myFunction()">  value="value1">Option 1  value="value2">Option 2  value="value3">Option 3  function myFunction()  var selectedValue = document.querySelector('select').value; console.log(selectedValue); >

В этом примере при выборе опции вызывается функция myFunction() , которая выводит значение выбранной опции в консоль.

Чтобы настроить внешний вид выпадающего списка, можно использовать CSS. Например, чтобы изменить цвет фона и цвет текста выбранных опций, можно добавить следующий код:

select option:checked  background-color: #007bff; color: #fff; >

Этот код изменит фон выбранной опции на синий цвет и цвет текста на белый.

Создаем выпадающее меню 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

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

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

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

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

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

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

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

Создайте элемент с id. Создайте тег внутри элемента с классом «navbar». Тег
- Внутри тега
- добавьте контент, который хотите показать в меню.
```
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>
```
Как создать выпадающее меню на HTML и CSS

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 46 388.

В этой статье:

Из этой статьи вы узнаете, как создать выпадающее меню с помощью HTML и CSS. Выпадающее меню открывается, когда пользователь наводит на него указатель мыши; когда меню открыто, пользователь может щелкнуть по одной из опций меню, чтобы перейти на соответствующую страницу.
- В Notepad++ сначала откройте меню «Язык» вверху окна и выберите в нем «HTML».
Введите заголовок документа. Это код, который определяет тип кода, используемый в остальной части документа:
```
 html> head> style> 
```
Создайте выпадающее меню. Введите следующий код, чтобы задать размер и цвет меню. Вместо «#» введите нужную цифру (чем больше цифра, тем больше меню). Также в строках «background-color» и «color» можно подставить название нужного цвета или его HTML-код: [1] X Источник информации
```
.dropbtn  background-color: black; color: white; padding: #px; font-size: #px; border: none; > 
```
Укажите, что в меню будут присутствовать опции. Так как опции будут добавлены позже, поместите их в меню, введя следующий код:
```
.dropdown  position: relative; display: inline-block; > 
```
Настройте внешний вид выпадающего меню. Следующий код задаст размер меню, его положение, когда затрагиваются другие элементы веб-страницы, и цвет. В строке «min-width» вместо «#» подставьте нужную цифру (например, 250), а в строке «background-color» — название нужного цвета или его HTML-код:
```
.dropdown-content  display: none; position: absolute; background-color: lightgrey; min-width: #px; z-index: 1; > 
```
Добавьте информацию о содержимом выпадающего меню. Следующий код задает цвет текста и размер кнопки меню. Вместо «#» подставьте число (в пикселях), чтобы задать размер кнопки:
```
.dropdown-content a  color: black; padding: #px #px; text-decoration: none; display: block; > 
```
Укажите, как будут меняться цвета меню, когда пользователь наведет на него курсор мыши. В первой строке «background-color» указывается цвет, в который окрасится выбранная опция, а во второй строке «background-color» цвет, в который окрасится кнопка выпадающего меню. В идеале эти цвета должны быть светлее, чем цвета опций и кнопки, когда курсор не наведен на них.
```
.dropdown-content a:hover background-color: white;> .dropdown:hover .dropdown-content display: block;> .dropdown:hover .dropbtn background-color: grey;> 
```
Закройте раздел CSS. Для этого введите следующий код:
```
style> head> 
```
Укажите имя выпадающего меню. Введите следующий код, где «Name» замените на слово (например, «Меню»), которое отобразится на кнопке меню.
```
div class="dropdown"> button class="dropbtn">Namebutton> div class="dropdown-content"> 
```
Добавьте опции меню. Каждая опция меню должна ссылаться на что-либо, например, на страницу вашего или другого веб-сайта. Чтобы добавить опции в меню, введите следующий код, где вместо https://www.website.com подставьте адрес страницы (кавычки не удаляйте), а вместо «Name» подставьте название опции.
```
a href="https://www.website.com">Namea> a href="https://www.website.com">Namea> a href="https://www.website.com">Namea> 
```
Завершите код. Введите следующие теги, чтобы указать конец кода выпадающего меню:
```
div> div> body> html> 
```
Просмотрите код выпадающего меню. Код должен выглядеть примерно так: [2] X Источник информации
```
 html> head> style> .dropbtn  background-color: black; color: white; padding: 16px; font-size: 16px; border: none; > .dropdown  position: relative; display: inline-block; > .dropdown-content  display: none; position: absolute; background-color: lightgrey; min-width: 200px; z-index: 1; > .dropdown-content a  color: black; padding: 12px 16px; text-decoration: none; display: block; > .dropdown-content a:hover background-color: white;> .dropdown:hover .dropdown-content display: block;> .dropdown:hover .dropbtn background-color: grey;> style> head> div class="dropdown"> button class="dropbtn">Social Mediabutton> div class="dropdown-content"> a href="https://www.google.com">Googlea> a href="https://www.facebook.com">Facebooka> a href="https://www.youtube.com">YouTubea> div> div> body> html> 
```
- Всегда проверяйте код, прежде чем размещать его на своем веб-сайте.
- Описанные здесь методы предназначены для создания выпадающего меню, которое открывается, если навести на него курсор мыши. Чтобы создать выпадающее меню, которое открывается, если щелкнуть по нему, воспользуйтесь JavaScript. [3] X Источник информации
Предупреждения
- Набор HTML-цветов довольно ограничен, если использовать их названия, например, «black» (черный) или «green» (зеленый). На этой странице есть генератор кодов HTML-цветов, с помощью которого можно найти код любого цвета.
Читать:
Что писать в сноске в ворде