Как оформить раскрывающийся список с помощью только css?

Содержание:

Стили навигации
МЕНЮ
Выпадающее меню на HTML+CSS
- - HTML код выпадающего меню
  - Стили CSS выпадающего меню
Создать мега меню
Откаты
Создание выпадающего меню в навигации
Изображения
Создание или удаление настраиваемого списка для сортировки и подстановки данных
Настройка
Хак с чекбоксом
- HTML
- CSS
ФОРМЫ
CSS
МЕНЮ

Стили навигации

Таблица стилей содержит код сброса значений свойств по умолчанию. Многие разработчики включают файл от Eric Meye, но для нашего случая он слишком громоздкий. К тому же код хранится на другом сервере, что само по себе является плохим решением в данном случае.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { background: #eaeaea url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom: 60px; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

В коде есть интересное свойство -webkit-font-smoothing. Оно предназначено для сглаживания шрифтов при работе кода в браузерах под управлением Mac OS X или iOS.

Теперь перейдем к нашему меню.

#ddmenu {
  display: block;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 0 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
  cursor: pointer;
  outline: none;
  font-weight: bold;
  color: #8aa8bd;
}

#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }

#ddmenu li a {
  display: block;
  float: left;
  padding: 0 12px;
  line-height: 78px;
  font-weight: bold;
  text-decoration: none;
  color: #6c87c0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; }

#ddmenu ul {
  position: absolute;
  top: 88px;
  width: 130px;
  background: #fff;
  display: none;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

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

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

#ddmenu ul:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 8px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: #fff transparent; 
}

#ddmenu ul:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 4px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1) transparent;  
}

#ddmenu ul li { 
  display: block; 
  width: 100%; 
  font-size: 0.9em; 
  text-shadow: 1px 1px 0 #fff;
}

#ddmenu ul li a {
  display: block;
  width: 100%;
  padding: 6px 7px;
  line-height: 1.4em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu ul li a:hover {
  background: #e9edf3;
}

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

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

HTML код выпадающего меню

<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a>
        <ul>
            <li><a href="#">Услуга 1</a></li>
            <li><a href="#">Длинная услуга 2</a></li>
            <li><a href="#">Услуга 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Цены</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

Стили CSS выпадающего меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#819A32; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#819A32; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #677B27; /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li > ul {
        position:absolute;
        top:25px;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li:hover > ul {
        display:block; 
        width:250px;  /*Задаем ширину выпадающего меню*/      
    }
   li:hover > ul > li {
        float:none; /*Убираем горизонтальное позиционирование*/
    }

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

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание

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

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

Шаг 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-индекс для размещения выпадающего списка перед другими элементами.

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

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

Откаты

У нас есть 5 выпадающих меню. Но как насчет старых браузеров?

В игру вступает наш друг Modernizr. Для тех, кто не знает, что такое Modernizr — это библиотека JavaScript, которая обнаруживает HTML5 и CSS3-функции в браузере пользователя.

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

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}

Если браузер не поддерживает непрозрачность или указатель событий, мы скрываем выпадающее меню простым

Если браузер не поддерживает прозрачность, но поддерживает указатель событий, мы устанавливаем pointer-events: auto.

Если браузер не поддерживает указатель событий, но поддерживающий прозрачность, мы поставили opacity: 1.

Демо Скачать исходные фалы

Автор урока: HUGO GIRAUDEL

Создание выпадающего меню в навигации

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

Пример

<div class=»sidenav»> <a href=»#about»>О Нас</a> <a href=»#services»>Услуги</a> <a href=»#clients»>Клинты</a> <a href=»#contact»>Контакт</a> <button class=»dropdown-btn»>Выпадающий <i class=»fa fa-caret-down»></i> </button> <div class=»dropdown-container»> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div> <a href=»#contact»>Поиск</a> </div>

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

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

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

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

Пример

/* Фиксированный боковых навигационных ссылок, полной высоты */.sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px;}/* Стиль боковых навигационных ссылок и раскрывающейся кнопки */.sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width:100%; text-align: left; cursor: pointer; outline: none;}/* При наведении курсора мыши */.sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1;}/* Основное содержание */.main { margin-left: 200px; /* То же, что и ширина боковой навигации */ font-size: 20px; /* Увеличенный текст для включения прокрутки */ padding: 0px 10px;}/* Добавить активный класс для кнопки активного выпадающего списка */.active { background-color: green; color: white;}/* Выпадающий контейнер (по умолчанию скрыт). Необязательно: добавьте более светлый цвет фона и некоторые левые отступы, чтобы изменить дизайн выпадающего содержимого */.dropdown-container { display: none; background-color: #262626; padding-left: 8px;}/* Необязательно: стиль курсора вниз значок */.fa-caret-down { float: right; padding-right: 8px;}

Шаг 3) Добавить JavaScript:

Пример

//* Цикл через все кнопки выпадающего списка для переключения между скрытием и отображением его выпадающего содержимого — это позволяет пользователю иметь несколько выпадающих списков без каких-либо конфликтов */var dropdown = document.getElementsByClassName(«dropdown-btn»); var i;for (i = 0; i < dropdown.length; i++) { dropdown.addEventListener(«click», function() { this.classList.toggle(«active»); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === «block») { dropdownContent.style.display = «none»; } else { dropdownContent.style.display = «block»; } }); }

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

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

Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигации.

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

Изображения

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

Создание или удаление настраиваемого списка для сортировки и подстановки данных

Для сортировки или заполнения значений в пользовательском порядке можно применять настраиваемые списки. В Excel есть встроенные списки дней недели и месяцев года, но вы можете создавать и свои настраиваемые списки.

Чтобы понять, что представляют собой настраиваемые списки, полезно ознакомиться с принципами их работы и хранения на компьютере.

Сравнение встроенных и настраиваемых списков

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

Пн, Вт, Ср, Чт, Пт, Сб, Вс

Понедельник, Вторник, Среда, Четверг, Пятница, Суббота, Воскресенье

янв, фев, мар, апр, май, июн, июл, авг, сен, окт, ноя, дек

Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь

Примечание:

Изменить или удалить встроенный список невозможно.

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

Высокое, Среднее, Низкое

Большое, Среднее, Малое

Север, Юг, Восток, Запад

Старший менеджер по продажам, Региональный менеджер по продажам, Руководитель отдела продаж, Торговый представитель

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

Примечание:

Настраиваемый список может содержать только текст или текст с числами. Чтобы создать настраиваемый список, содержащий только числа, например от 0 до 100, нужно сначала создать список чисел в текстовом формате.

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

Введение значений напрямую

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

В Excel 2010

и более поздних версиях выберите пунктыФайл >Параметры >Дополнительно >Общие >Изменить списки .

В Excel 2007

нажмитекнопку Microsoft Office и выберите пунктыПараметры Excel >Популярные >Основные параметры работы с Excel >Изменить списки .

Выберите в поле Списки

пунктНОВЫЙ СПИСОК и введите данные в полеЭлементы списка , начиная с первого элемента.

После ввода каждого элемента нажимайте клавишу ВВОД.

Завершив создание списка, нажмите кнопку Добавить

На панели Списки

появятся введенные вами элементы.

Нажмите два раза кнопку ОК

Создание настраиваемого списка на основе диапазона ячеек

Выполните указанные ниже действия.

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

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

в полеИмпорт списка из ячеек , и нажмите кнопкуИмпорт .

На панели Списки

появятся выбранные вами элементы.

«Параметры» > «Дополнительно» > «Общие» > «Изменить списки». Если вы используете Excel 2007, нажмите кнопку Office и выберите «Параметры Excel» > «Популярные» > «Изменить списки».» /> Два раза нажмите кнопку ОК

Примечание:

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

Выполните указанные ниже действия.

По приведенным выше инструкциям откройте диалоговое окно «Списки».

Выделите список, который нужно удалить, в поле Списки

и нажмите кнопкуУдалить .

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

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

впараметрах Excel : его можно выбрать только в столбцеПорядок диалогового окнаСортировка . Настраиваемый список, сохраненный в файле книги, также недоступен непосредственно для командыЗаполнить .

При необходимости можно добавить такой список в реестр компьютера или сервера, чтобы он был доступен в Параметрах Excel

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

Настройка

Создайте пустой 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. Лучший способ сделать это – использовать скрытый чекбокса.

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :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 до большого числа.

ФОРМЫ

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

CSS

Code

#m_body li ul { display: none; } #m_body li:hover ul, #m_body li.over ul { display: block; } #m_body { text-align:left; background:#222222; width: 200px; } #m_body a { display: block; width: 185px; padding-left: 15px; } #m_body ul li { list-style-type: none; line-height: 24px; margin-left: -40px; padding-left: 0px; } #m_body ul li a { color: #6F6F6F; text-decoration: none; font-size: 12px; font-family: Verdana; } #m_body ul li a:hover { color:#FFFFFF; text-decoration: none; background:#2C2C2C; } #m_body ul li ul li { border: 0; list-style-type: none; list-style-position: inside; background:#2681DC; border-bottom:1px solid #3C8FDF; } #m_body ul li ul li a { color:#9ECAF4; } #m_body ul li ul li a:hover { color:#FFFFFF; background:#2681DC; }

Как оформить раскрывающийся список с помощью только css?

Стили навигации

МЕНЮ

Выпадающее меню на HTML+CSS

HTML код выпадающего меню

Стили CSS выпадающего меню

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

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

Пример

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

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

Пример

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

Откаты

Создание выпадающего меню в навигации

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

Пример

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

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

Пример

Шаг 3) Добавить JavaScript:

Пример

Изображения

Создание или удаление настраиваемого списка для сортировки и подстановки данных

Настройка

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

HTML

CSS

ФОРМЫ

CSS

МЕНЮ