Как найти выпадающее меню

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

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

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

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

Редактор кода »

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

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

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

Пример

<div class=»dropdown»>
  <button class=»dropbtn»>Выпадающее</button>
  <div class=»dropdown-content»>
    <a href=»#»>Ссылка 1</a>
    <a href=»#»>Ссылка 2</a>
    <a href=»#»>Ссылка 3</a>
  </div>
</div>

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

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.

Используйте элемент контейнера (например, <div>), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.

Оберните элемент <div> вокруг кнопки и <div>, чтобы правильно расположить выпадающее меню с помощью CSS.

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

Пример

/* Кнопка выпадающего списка */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* Контейнер <div> — необходим для размещения выпадающего содержимого */
.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 {background-color: #ddd;}

/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content {display: block;}

/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Редактор кода »

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

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

Класс .dropdown использует position:relative, что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute).

Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).

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

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

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

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

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

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

Источник


Загрузить PDF


Загрузить PDF

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

Шаги

  1. Изображение с названием 3234689 1

    1

    Откройте текстовый редактор. Можно использовать обычный текстовый редактор, например, Блокнот или TextEdit, или более функциональный текстовый редактор, такой как Notepad++.

    • В Notepad++ сначала откройте меню «Язык» вверху окна и выберите в нем «HTML».

  2. Изображение с названием 3234689 2

    2

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

    <!DOCTYPE html>
<html>
<head>
<style>

  3. Изображение с названием 3234689 3

    3

    Создайте выпадающее меню. Введите следующий код, чтобы задать размер и цвет меню. Вместо «#» введите нужную цифру (чем больше цифра, тем больше меню). Также в строках «background-color» и «color» можно подставить название нужного цвета или его HTML-код:[1]

    .dropbtn {
    background-color: black;
    color: white;
    padding: #px;
    font-size: #px;
    border: none;
}

  4. Изображение с названием 3234689 4

    4

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

    .dropdown {
    position: relative;
    display: inline-block;
}

  5. Изображение с названием 3234689 5

    5

    Настройте внешний вид выпадающего меню. Следующий код задаст размер меню, его положение, когда затрагиваются другие элементы веб-страницы, и цвет. В строке «min-width» вместо «#» подставьте нужную цифру (например, 250), а в строке «background-color» — название нужного цвета или его HTML-код: 

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: #px;
    z-index: 1;
}

  6. Изображение с названием 3234689 6

    6

    Добавьте информацию о содержимом выпадающего меню. Следующий код задает цвет текста и размер кнопки меню. Вместо «#» подставьте число (в пикселях), чтобы задать размер кнопки: 

    .dropdown-content a {
    color: black;
    padding: #px #px;
    text-decoration: none;
    display: block;
}

  7. Изображение с названием 3234689 7

    7

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

    .dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}

  8. Изображение с названием 3234689 8

    8

    Закройте раздел CSS. Для этого введите следующий код:

  9. Изображение с названием 3234689 9

    9

    Укажите имя выпадающего меню. Введите следующий код, где «Name» замените на слово (например, «Меню»), которое отобразится на кнопке меню. 

    <div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">

  10. Изображение с названием 3234689 10

    10

    Добавьте опции меню. Каждая опция меню должна ссылаться на что-либо, например, на страницу вашего или другого веб-сайта. Чтобы добавить опции в меню, введите следующий код, где вместо https://www.website.com подставьте адрес страницы (кавычки не удаляйте), а вместо «Name» подставьте название опции. 

    <a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>

  11. Изображение с названием 3234689 11

    11

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

    </div>
</div>
</body>
</html>

  12. Изображение с названием 3234689 12

    12

    Просмотрите код выпадающего меню. Код должен выглядеть примерно так: [2]

    <!DOCTYPE html>
<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 Media</button>
<div class="dropdown-content">

<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.youtube.com">YouTube</a>

</div>
</div>
</body>
</html>

    Реклама

Советы

  • Всегда проверяйте код, прежде чем размещать его на своем веб-сайте.
  • Описанные здесь методы предназначены для создания выпадающего меню, которое открывается, если навести на него курсор мыши. Чтобы создать выпадающее меню, которое открывается, если щелкнуть по нему, воспользуйтесь JavaScript.[3]

Реклама

Предупреждения

  • Набор HTML-цветов довольно ограничен, если использовать их названия, например, «black» (черный) или «green» (зеленый). На этой странице есть генератор кодов HTML-цветов, с помощью которого можно найти код любого цвета.

Реклама

Об этой статье

Эту страницу просматривали 45 584 раза.

Была ли эта статья полезной?

Источник

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

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

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<nav id = «nav»>

<ul>

<li><a href = «#»>Пункт 1</a>

<ul class = «second»>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

</ul>

</li>

<li><a href = «#»>Пункт 2</a>

<ul class = «second»>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

</ul>

</li>

<li><a href = «#»>Пункт 3</a>

<ul class = «second»>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

</ul>

</li>

<li><a href = «#»>Пункт 4</a>

<ul class = «second»>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

</ul>

</li>

</ul>

</nav>

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

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.

Пишем css-стили

Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.

*{

margin: 0;

padding: 0;

}

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

#nav{

height: 70px;

}

#nav ul{

list—style: none;

}

Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

#nav > ul > li{

float: left;

width: 180px;

position: relative;

}

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

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

Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:

#nav li a{

display: block;

background: #90DA93;

border: 1px solid #060A13;

color: #060A13;

padding: 8px;

text—align: center;

text—decoration: none;

}

#nav li a:hover{

background: #2F718E;

}

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

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

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

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

#nav li .second{

display: none;

position: absolute;

top: 100%;

}

Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

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

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{

display: block;

}

Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.

Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:

#nav li li{

width: 180px;

}

Все, проблема решена:

Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.

Переделываем меню в вертикальное

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{

display: none;

position: absolute;

left: 100%;

top: 0;

}

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

<li><a href = «#»>Пункт 4</a>

<ul class = «second»>

<li><a href = «#»>Подпункт</a>

<ul class = «third»>

<li><a href = «#»>Подпункт подпункта</a></li>

<li><a href = «#»>Подпункт подпункта</a></li>

</ul>

</li>

<li><a href = «#»>Подпункт</a></li>

<li><a href = «#»>Подпункт</a></li>

</ul>

</li>

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

#nav li li .third{

display: none;

position: absolute;

left: 100%;

top: 0;

}

#nav li li:hover .third{

display: block;

}

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

Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?

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

Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!

В общем, итог таков:

При наведении на пункт 4 появляется первое выпадающее меню, при наведении на первый подпункт появляется отдельное меню для него, которое расположено сбоку. У других подпунктов такое меню не отображается, так как мы не создавали его в html-разметке.

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

Итог

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Много других очень интересных возможностей css вы можете узнать в нашем премиум-курсе по новым фишкам css3. Там вы научитесь делать градиенты, работать с новыми селекторами, создавать тени и т.д. Если вам нравится css, то точно понравится эта серия уроков. Ну а я на этом прощаюсь с вами.

Источник

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

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

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

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

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

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

  • Создайте элемент <div> с id. Создайте тег <ul> внутри элемента <div> с классом «navbar». Тег <ul> используется для указания неупорядоченного списка, который содержит элементы без порядковых номеров. Каждый элемент неупорядоченного списка описывается внутри тега <li>.
  • Внутри тега <li> добавьте контент, который хотите показать в меню.
<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>

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

Теперь, когда у нас есть половина кода, можем добавить к нему стиль. С помощью 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;
}

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

Пример

<!DOCTYPE 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>

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

Пример

<!DOCTYPE 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>

Источник

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.

Исходный код
Демо

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

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые 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 {
			    background-color: #000000;
		}

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

Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию
			 * и задаем абсолютное позиционирование */
			nav ul ul {
			    display: none;
			    position: absolute;
			    top: 100%;
			}
			
			/* отображаем выпадающий список при наведении */
			nav ul li:hover > ul {
			    display:inherit;
			}
			
			/* первый уровень выпадающего списка */
			nav ul ul li {
			    min-width:170px;
			    float:none;
			    display:list-item;
			    position: relative;
			}

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

Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

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

/* второй, третий и последующие уровни 
			 * смещаем 2 и 3 уровни влево 
			 * на значение длины первого уровня.
			*/
			nav ul ul ul {
			    position: absolute;
			    top:0;
			    left:100%;
		}

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

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

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

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

/* измените ' +' на любой другой символ, если нужно
	*/
			li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

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

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

В завершение

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

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Источник

Понравилась статья? Поделить с друзьями:
  • Как найти удаленную анкету на сайте знакомств
  • Как найти скрытый инстаграм на телефоне
  • Как найти правый яичник
  • Формулы как найти улица
  • Как правильно составить клиентскую базу