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

Выпадающий список 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 :

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Шаг 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 стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Пример 3

This one is probably the one which comes the closest to a regular select element. Indeed, when you pick something, the label’s default value is replaced by the picked value. On a side note: it looks great doesn’t it?

Разметка

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span>Transport</span>
    <ul class="dropdown">
        <li><a href="#"><i class="icon-envelope icon-large"></i>Classic mail</a></li>
        <li><a href="#"><i class="icon-truck icon-large"></i>UPS Delivery</a></li>
        <li><a href="#"><i class="icon-plane icon-large"></i>Private jet</a></li>
    </ul>
</div>

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Адаптация выпадающего html меню под мобильные устройства

Для того чтобы данное меню стало адаптироваться под мобильные устройства нам нужно:

1. 1.Добавить дополнительный блок с кнопкой, которая будет вызывать выпадающее меню на мобильных устройствах. Для этого перед кодом вывода меню вставляем код:

   PHP

   <div class=»mobile-menu-button»> Меню </div>

   1	<div class=»mobile-menu-button»>Меню<div>

2. 2.Далее нам нужно убедиться что к сайту подключена библиотека jQuery.

   Более подробно о её подключении вы можете узнать в этой статье «Как подключить jQuery к сайту»

3. 3.Добавить небольшой скрипт, который отвечает за вызов выпадающего меню при нажатии на соответствующую кнопку на маленьких экранах. Данный скрипт вставляем перед закрытием тега </body>

   PHP

   <script>
   jQuery(document).ready(function($) {
   $(‘.mobile-menu-button’).click(function(e) {
   var $message = $(‘.new-mobile-menu’);
   if ($message.css(‘left’) != ‘0px’) {
   $message.css(‘left’,’0px’);
   var firstClick = true;
   $(document).bind(‘click.myEvent’, function(e) {
   if (!firstClick && $(e.target).closest(‘.new-mobile-menu’).length == 0) {
   $message.css(‘left’,’-1000px’);
   $(document).unbind(‘click.myEvent’);
   }
   firstClick = false;
   });
   }
   e.preventDefault();
   });
   });
   </script>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <script> jQuery(document).ready(function($){ $(‘.mobile-menu-button’).click(function(e){ var$message=$(‘.new-mobile-menu’); if($message.css(‘left’)!=’0px’){ $message.css(‘left’,’0px’); varfirstClick=true; $(document).bind(‘click.myEvent’,function(e){ if(!firstClick&&$(e.target).closest(‘.new-mobile-menu’).length==){ $message.css(‘left’,’-1000px’); $(document).unbind(‘click.myEvent’); } firstClick=false; }); } e.preventDefault(); }); }); </script>

Вот, собственно говоря, и всё! Теперь осталось всё сохранить, проверить работоспособность и при необходимости внести свои правки в html и css код.
На первый взгляд кода много, но он не сложный и вы без труда сможете скорректировать его под свой сайт.

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

Так же заходите на мой канал YouTube, уверена, что вы найдёте там что то интересное для себя!

Успехов вам и вашим проектам! До скорых встреч в других моих статьях и видео!

С уважением Юлия Гусарь

CSS код

/* Главное меню */
#menu
{
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a
{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
        color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
        color: #fafafa;
}

#menu li:hover > ul
{
        display: block;
}

/* Подменю */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a
{
    padding: 10px;
        height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
}

*html #menu ul a /* IE6 */
{
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a /* IE7 */
{
        height: 10px;
        width: 150px;
}

#menu ul a:hover
{
    background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

#menu:after
{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Довольно много, да? Это так…

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

Альтернативный вариант создания списка в экселе – это использование ActiveX. В сравнении с первым решением, инструкция немного сложнее, поскольку список опций несколько шире: разрешено задавать большое количество элементов, менять внешний вид списков.

Инструкция по использованию инструментов от разработчика следующая:

1. Активировать опции, поскольку они автоматически отключены. Для этого нужно перейти в меню «Файл».

2. В списке слева найти меню «Параметры» и кликнуть по нему.

3. Открыть раздел с настройками ленты и перейти к «основным вкладкам», поставить галочку напротив разработчика. Остается кликнуть на ОК, чтобы сохранить опции.

4. Должна появиться новая вкладка «Разработчик», через которую можно будет отслеживать рабочий процесс. Для начала создается столбик с элементами, которые выполняют функцию исходных данных для создания выпадающего списка.

5. Перейти в «Разработчик». В подпункте элементов управления кликнуть на кнопку вставки. В появившемся окне выбрать опцию «элементы ActiveX» и кликнуть на значок «Поле со списком».

6. Нажать на нужную ячейку, чтобы появилось окно со списком. По желанию можно настроить параметры и границы. При выделении списка, на панели инструментов появится «режим конструктора». Нажать на «Свойства», если требуется продолжить настройку.

7. В параметрах найти ListFillRange. В столбике поставить рядом «:» и описать координаты ячеек, чтобы создать определенный диапазон. Закрыть окно.

8. Правой кнопкой мышки кликнуть на список в окне, выбрать «объект ComboBox» и кликнуть на edit.

9. Должен появиться список с заранее заданным параметрами.

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

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

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

• минимальное количество столбиков – три. В первом указываются наименования, второй и третий – для единиц или количества. При необходимости можно задавать большее количество столбиков;

• для начала создается один, общий список для всех названий. Выделяются ячейки с наименованиями посредством контекстного меню;

• задать определенное имя;

• по аналогии формируются отдельные списки для каждого наименования с определением количества единиц;

• далее потребуется вставить общий список с наименованиями в верхней ячейке в первом столбике главной страницы;

• указать в качестве основного источника ранее заданную таблицу;

• кликнуть по верхней части столбика, где указаны единицы измерения, зайти в проверочное окно и в источнике указать «=ДВССЫЛ(A2)», вместо А2 может быть любая ячейка с наименованием продукта;

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

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

JavaScript

<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
    e.preventDefault();
  });
    
  $('#ddmenu li').hover(function () {
     clearTimeout($.data(this,'timer'));
     $('ul',this).stop(true,true).slideDown(200);
  }, function () {
    $.data(this,'timer', setTimeout($.proxy(function() {
      $('ul',this).stop(true,true).slideUp(200);
    }, this), 100));
  });

});
</script>

Первая часть кода перехватывает нажатия на ссылках и останавливает их обработку по умолчанию (загрузка страниц по адресу URL).

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

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

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

Пример

<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 , чтобы раскрывающееся меню выглядело как «карточка».

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

Создать мега меню

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

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

Пример

<div class=»navbar»>  <a href=»#home»>Главная</a>  <a href=»#news»>Новости</a>  <div class=»dropdown»>    <button class=»dropbtn»>Выпадающий      <i class=»fa fa-caret-down»></i>    </button>    <div class=»dropdown-content»>      <div class=»header»>        <h2>Мега меню</h2>      </div>      <div class=»row»>        <div class=»column»>          <h3>Категории 1</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 2</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 3</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>      </div>    </div>  </div></div>

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

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

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

Оберните элемент <div class=»dropdown»> вокруг кнопки и элемент контейнер (<div class=»dropdown-content»> в позиции выпадающего меню с помощью правильного CSS.

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

Пример

/* Контейнер навигации */.navbar {  overflow: hidden;  background-color: #333;  font-family: Arial;}/* Ссылки в панели навигации */.navbar a {  float: left;  font-size: 16px;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}/* Выпадающий контейнер */.dropdown {  float: left;  overflow: hidden;}/* Кнопка выпадающего списка */.dropdown .dropbtn {  font-size: 16px;  border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */  margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */}/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */.navbar a:hover, .dropdown:hover .dropbtn {  background-color: red;}/* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  width: 100%;  left: 0;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}/* Мега заголовок меню, если это необходимо */.dropdown-content .header {  background: red;  padding: 16px;  color: white;}/* Показать выпадающее меню при наведении курсора */.dropdown:hover .dropdown-content {  display: block;}/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */.column {  float: left;  width: 33.33%;  padding: 10px;  background-color: #ccc;  height: 250px;}/* Ссылки стиля внутри столбцов */.column a {  float: none;  color: black;  padding: 16px;  text-decoration: none;  display: block;  text-align: left;}/* Добавить цвет фона при наведении курсора */.column a:hover {  background-color: #ddd;}/* Очистить поплавки после столбцов */.row:after {  content: «»;  display: table;  clear: both;}

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

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

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

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

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

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

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

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

Изображения

СлайдшоуГалерея слайдшоуМодальные изображенияЛайтбоксАдаптивная сетка изображенияСетка изображенияГалерея изображений с вкладкамиНаложение при наведении курсора на изображениеСлайд наложенного изображенияZoom наложенного изображенияTitle наложенного изображенияИконка наложенного изображенияЭффекты изображенияЧерное и белое изображениеПозиция текста над изображениемТекстовые блоки над изображениемИзображение с прозрачным текстомФоновое изображение на всю страницуФорма на изображенииИмидж герояРазмытое фоновое изображение на всю страницуИзменение фона при прокруткеИзображения друг за другомОкруглые изображенияИзображения аватарыАдаптивные изображенияЦентрирование изображенийЭскизы изображенийПредставление команды на страницеЛипкое изображениеОтразить изображениеВстряхнуть изображениеГалерея портфолиоПортфолио с фильтрациейZoom изображенияУвеличительное стекло на изображенииСлайдер сравнения изображений