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

Введение

Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS

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

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

Выпадающий список создается с помощью тега

Использование атрибута value

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

В следующем примере мы создадим выпадающий список с атрибутом value :

Пример получения доступа к выбранному варианту в JavaScript

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

Для option value HTML используется следующий код:

Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :

Также можно получить доступ к значению с помощью JQuery-метода $.val() :

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.

Пример получения значения в скрипте PHP

В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “ Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:

Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST . Это код формы, используемый в примере:

А вот как PHP-скрипт используется, чтобы получить значение HTML select option :

Если в форме указан метод GET , тогда используйте PHP-массив $_GET .

Определение стилей выпадающего списка с помощью CSS

Теперь рассмотрим, как определить стили выпадающего списка , используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 :

Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:

Закругленные углы с помощью свойства border-radius

Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:

Использование нескольких атрибутов и стилей CSS

Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .

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

Кроме этого все выбранные варианты помечаются галочками, и можно установить лимит на количество выбранных вариантов, используя атрибут multiple .

В приведенной демо-версии пользователь может выбрать два варианта из списка:

Демо-версия выпадающего списка с опцией поиска

Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :

Хак с чекбоксом

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

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

HTML

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox" id="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

CSS

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Подготовка иконок меню

Скачайте набор из 80 иконок. В данной статье мы будем использовать следующие иконки:

• Home;
• User;
• Portfolio;
• Chat;
• Envelope.

Чтобы найти нужные иконки, откройте файл PSD из архива и найдите слои с соответствующими названиями.

Итак, перетащите иконку Home в новый PSD-файл в Photoshop. Затем выберите пункт меню «Image -> Canvas Size» и добавьте область в 16 пикселей слева.

Убедитесь, что якорь установлен вправо, как на картинке ниже:

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

Это можно сделать, нажав комбинацию клавиш Ctrl+A на клавиатуре и кликнув по кнопке «align right edges», находящейся на панели инструментов Align сверху:

Далее повторите то же самое для остальных иконок и не забудьте в конце нажать кнопку сохранения в качестве png-файла:

Выпадающий список

Иногда списки удобно делать раскрывающимися. В исходном состоянии они закрыты, и по умолчанию видимой остается только первая позиция. Схема кода у них похожа на предыдущие. Элементы списка создаются тегом option, вкладываемым в контейнер < select>:

< select>

< option>el1

< option> el2

< option selected> el3

По умолчанию всегда показывается 1-й элемент. Его можно заменить, применив атрибут selected тега < option>, как представлено в коде выпадающего списка. В нем становится видимым 3-й элемент, когда список закрыт.

В некоторых списках требуется выбирать сразу несколько позиций. Для этого применяется атрибут multiple тега < select >.

Список определений

Часто требуется выделять слова из основного текста и давать им пояснения. Для этого делается список элементов с их определениями. Код открывается и закрывается тегами < dl > и < /dl >. Внутри расположены по порядку элементы, заключенные в пару < dt > и < /dt >. Часто их дополнительно выделяют тегами < strong >…< /strong >. После каждого элемента расположены пояснения, обрамленные парными < dd>…< /dd>. В целом код выглядит так:

< h2 > DefinitionList< /h2 >

< dl> < dt > WWW < /dt > < dd > WWW представляет всемирную паутину < /dd > < dt > CSS < /dt > < dd > CSS представляет таблицы стилей < /dd >< /dl>

На странице результат выполнения подобного кода будет выглядеть так:

Шаг 2 — Добавление кода HTML меню

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.

Основной выпадающий (раскрывающийся) список

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

Пример

<style>.dropdown {  position: relative; 
display: inline-block;}.dropdown-content {  display:
none;  position: absolute; 
background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding:
12px 16px;  z-index: 1;}.dropdown:hover
.dropdown-content {  display: block;}</style><div class=»dropdown»>
  <span>Mouse over me</span> 
<div class=»dropdown-content»>    <p>Hello World!</p>  </div></div>

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

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

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

Оберните элемент вокруг элементов, чтобы правильно разместить раскрывающийся контент с помощью CSS.

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

Класс содержит фактический раскрывающийся контент. По умолчанию он скрыт и будет отображаться при наведении мыши (см. ниже)

Обратите внимание, что для установлено значение 160px. Можете изменить его

Совет. Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же ширины, как и раскрывающаяся кнопка, установите для значение 100% (и для включения прокрутки на маленьких экранах).

Вместо использования border мы использовали свойство CSS , чтобы раскрывающееся меню выглядело как «карточка».

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

Часть 2

Составление CSS

1. Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:

1. Добавьте код clearfix. Помните класс «clearfix«, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:

.clearfix:after {
content: "";
display: table;
}

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

.nav-wrapper {
   width:100%;
   background: #999;
}

.nav-menu {
   position:relative;
   display:inline-block;
}

.nav-menu li {
   display: inline;
   list-style-type: none;
}

.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}

1. Задаем вывод выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:

.nav-menu ul li:hover > ul {
   display:inline-block;
}

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «.nav-menu > ul«:

1. Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:

.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

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

Подсказки

• Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
• Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

Вадим Дворниковавтор-переводчик статьи «How to Create a Dropdown Menu in HTML and CSS»

Многоуровневые выпадающие списки

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

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

Функционально список HTML будет работать, но с применением таблиц стилей можно оформить его, чтобы он был красивым и удобным.

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Использование CSS3 анимации

transition
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
.menu ul {  position: absolute;
  background: #666;
  border: 1px solid #999;/*установленные начальные параметры*/
  width: 0px;
  opacity: ;/*параметры применяемой анимации*/
  -webkit-transition: all .25s ease .1s;
  -moz-transition: all .25s ease .1s;
  -o-transition: all .25s ease .1s;
  -ms-transition: all .25s ease .1s;
  transition: all .25s ease .1s;
}.menu li:hover {
  overflow: visible;
}/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
  opacity: 1;
  width: 150px;
}.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

Параметры для свойства transition задаются в следующем порядке:
[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например:  transition: height 1s easy-in .5s;  Что на словах можно истолковать как: плавно изменить высоту элемента, в течении 1 секунды, ускоряясь в завершении, начав анимацию с паузой в полсекунды.
  Значении all указывает что анимация должна воздействовать на все доступные свойства.
http://magentawave.com

HTML структура

 <ul class=’menu’>
  <li><a href=»#»>Section 1</a></li>
  <li><a href=»#»>Section 2</a>
   <ul> <!—выпадающий блок—>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Some page</a></li>
   </ul>
  </li>
  <li><a href=»#»>Section 3</a>
   <ul> <!—выпадающий блок—>
    <li><a href=»#»>Some page</a></li>
    <li><a href=»#»>Sub-section</a>
      <ul> <!—выпадающий блок второго уровня—>
       <li><a href=»#»>Some page</a></li>
       <li><a href=»#»>Some page</a></li>
       <li><a href=»#»>Some page</a></li>
      </ul>
    </li>
   </ul>
  </li>
 </ul>
на основе других HTML-тегов

HTML-разметка

Добавим doctype HTML5 и несколько ссылок в секцию <head> нашего HTML-документа, тем самым подключив CSS-файлы:

<meta charset="utf-8" />
CSS3 Pop Out Menu
                <link href="css/normalize.css" rel="stylesheet" />
                <link href="css/style.css" rel="stylesheet" media="screen" />

Элементы меню находятся внутри контейнера div с классом container и сгруппированы в неупорядоченный список.

Каждый элемент имеет класс box, имеет внутри себя теги <a> и <h2> (для заголовка элемента):

<div class=»container»>
<ul class=»icon-menu»>
    <li class=»icon-box home»><a href=»#»>
</a>
<h2>Home</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box aboutme»><a href=»#»>
</a>
<h2>About Me</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box portfolio»><a href=»#»>
</a>
<h2>Portfolio</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box blog»><a href=»#»>
</a>
<h2>Blog</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box contact»><a href=»#»>
</a>
<h2>Contact</h2>
<a href=»#»>
 </a></li>
</ul>
</div>

Теперь, наша HTML-разметка готова и должна напоминать нечто похожее:

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Принцип действия и CSS

внедрения JavaScriptdisplaynoneblockinline-blockДля сокрытия/появления блоков можно применять и иные свойства CSS, чаще это делается когда к меню применяется эффекты CSS3-анимации
вертикальнымПример кода CSS
/*обнуление стилей*/
*{
  margin: 0;
  padding: 0;
  border: none;
}
ul, li {
  list-style-type: none; /*убираем маркеры списка*/
}
li a {
  text-decoration: none; /*убираем подчеркивание ссылок*/
}/*меню*/
.menu li {
  position: relative; /*позиционирование*/
  float: left; /*обтекание слева*/
}
.menu ul {
  position: absolute; /*позиционирование выпадающих блоков*/
  display: none; /*скрываем блоки*/
  min-width: 150px; /*минимальная ширина выпадающих блоков*/
}
.menu li:hover > ul {
  display: block; /*показываем блоки при наведении курсора на родителя*/
}/*положение выпадающих блоков первого уровня*/
.menu ul {
  left: 0;
  top: 100%;
}/*положение вложенных выпадающих блоков*/
.menu li ul li ul{
  left: 100%;
  top: 0%;
}
При верстке вертикального выпадающего меню необходимо:
  — точно указать ширину (width) всего блока меню (в данном случаи для селектора .menu);
  — свойство обтекания float для основных разделов не указывается.   Для всех выпадающих блоков можно указать одно положение, относительно основного.
  Тогда код CSS будет выглядеть примерно так:.menu {
  width: 150px; /*ширина всего блока*/
}
.menu li {
  position: relative;
}
.menu ul {
  position: absolute;
  display: none;
  min-width: 150px;
}
.menu li:hover > ul {
  display: block;
}/*положение всех выпадающих блоков*/
.menu li ul {
  left: 100%;
  top: 0%;
}

свойства CSSПример
/*меню*/
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
}/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}/*выпадающие блоки*/
.menu ul {
  position: absolute;
  display: none;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
}
.menu li:hover > ul {
  display: block;
}
.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

Для больших экранов

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

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

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

СКАЧАТЬ ИСХОДНЫЙ КОД

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

Вадим Дворниковавтор-переводчик статьи «How To Create a Responsive Dropdown Navigation Using Only CSS»

CSS

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

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

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Как сделать список в HTML и CSS выпадающим

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

< div class=»rolls» >

< button>products

< ul >

< a >< li >1элемент < /li >< /a >

< a >< li >2элемент < /li >< /a >

< a >< li >3элемент < /li >< /a >

< /ul >

Теперь к коду нужно применить свойства CSS

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

В стилях устанавливаются условия отображения или скрытия списка:

.rolls a{

list-style:none;

display:none}

.rolls:hover a{

display:block}

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

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

Создайте выпадающее меню, которое позволяет пользователю выбрать опцию из списка:

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

Ссылка 1
Ссылка 2
Ссылка 3

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

Пример

<style>/* Стилизация выпадающей кнопки */.dropbtn { 
background-color: #4CAF50;  color: white; 
padding: 16px;  font-size: 16px; 
border: none;  cursor: pointer;}/* Контейнер <div> — необходимо разместить выпадающий контент */.dropdown {
  position: relative;  display:
inline-block;}/* Выпадающий контент (скрыт по умолчанию) */
.dropdown-content {  display: none;  position:
absolute;  background-color: #f9f9f9; 
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: #f1f1f1}/* Показать выпадающее меню при наведении */.dropdown:hover .dropdown-content { 
display: block;}/* Изменить цвет фона кнопки выпадающего списка, когда отображается содержимое выпадающего списка. */.dropdown:hover .dropbtn {  background-color: #3e8e41;}</style><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>

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

displayoverflowtopleftoverflow
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden; /*все блоки вне видимой области будут скрыты*/
}/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  *display: none;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
}
.menu li:hover {
  overflow: visible; /*при наведении покажет скрытую область*/
}.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

top
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
  background: #0C6;
}
/*выпадающие блоки*/
.menu ul {
  position: absolute;
  background: #666;
  border: 1px solid #999;
  min-width: 150px;
  top: -9999em; /*изначальное смещение выпадающих блоков*/
}
.menu li:hover > ul {
  left: 0;
  top: 100%;
}
.menu li ul li:hover > ul {
  left: 100%;
  top: 0%;
}