Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка
3 ноября 2016 | Опубликовано в css | 6 Комментариев »
В этом уроке мы рассмотрим создание выпадающего меню на чистом CSS. Этот способ основан на применении элемента HTML флажка и интересном использовании классов и селекторов CSS без единой строки JavaScript. Демонстрацию работы этого способа и весь нужный код можно увидеть ниже. Также можно скачать полный исходный код по ссылке в конце урока.
Разметка
Структура HTML выглядит следующим образом. Важно отметить, что элемент ввода должен располагаться первым, до элементов подписи и ненумерованного списка. Позже, когда мы будем разбирать код CSS, станет понятно, почему.
<div class="dropdown"> <input type="checkbox" id="checkbox_toggle"> <label for="checkbox_toggle">Click to Expand</label> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </div>
Как Вы видите, здесь нет ничего сложного, все элементы HTML обычные, широко используемые:
- В блочном элементе находится все остальное.
- Элемент ввода типа флажок нужен из-за его возможности быть установленным или неустановленным. Он будет спрятан все время.
- Элемент подписи будет использоваться для переключения состояния элемента ввода и вызова выпадающего меню.
- Элемент ненумерованного списка — это просто список, который нужно сделать видимым, когда развернуто выпадающее меню. Это может быть и любой другой элемент.
Недокументированные возможности элемента флажка
Нам нужен элемент флажка только ради его установленного состояния, которому можно задать стили с помощью псевдокласса :checked. Установка и снятие флажка делается посредством нажатия на элемент подписи, что является обычной функцией браузера. Сначала спрячем элемент флажка:
input[type=checkbox]{ display: none; }
Еще спрячем по умолчанию элемент ненумерованного списка — это выпадающее меню, которое должно быть видно, только когда оно развернуто:
ul{ display: none; }
А вот и недокументированная возможность. Если объединить псевдокласс :checked с родственным селектором ~, можно изменять свойства CSS элементов, следующих за элементом флажка. Это причина, по которой нужно, чтобы элемент флажка располагался выше других элементов в дереве объектов документа.
input[type=checkbox]:checked ~ ul { display: block }
Код выше покажет ненумерованный список, только если установлен флажок. Так как у элемента ввода типа флажок возможно только два состояния, он отлично подходит для переключения элементов между развернутым и спрятанным состояниями.
Надеемся, вам понравился этот урок.
Автор урока Danny Markov
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
3 ноября 2016 в 18:07
Комментарий скрыт из-за рейтинга
Ответить
6 ноября 2016 в 23:27
Недокументированные? Методу сто лет в обед
Ответить
2 февраля 2018 в 15:14
Здравствуйте! Спасибо за подробное разъяснение метода. Заметил баг: если в ширина текста меньше, чем в, то обрезается по ширине а. Еще не понятно зачем здесь свойство box-shadow. Объясните плиз. Хочу дополнить, в тоже желательно ставить свойство user-select: none;, чтоб при щелчке на него он не выделялся.
Ответить
февраля 2, 2018 at 3:16 пп
Здравствуйте! Спасибо за подробное разъяснение метода. Заметил баг: если в label ширина текста меньше, чем в li, то li обрезается по ширине label. Еще не понятно зачем здесь свойство box-shadow. Объясните плиз. Хочу дополнить, в li тоже желательно ставить свойство user-select: none;, чтоб при щелчке на него он не выделялся.
Ответить