Как создать разворачивающееся меню, используя только CSS

Как создать разворачивающееся меню, используя только CSS

От автора: когда только начинаешь заниматься разработкой, то смотришь на разные сайты в интернете и думаешь: «Вот же, как бы я хотел сделать что-то подобное…», и понимаешь, скольким вещам ещё нужно научиться. Вы, наверняка, уже задумывались над тем, чего можно добиться, если знать основы HTML и CSS, но не до конца разбираетесь в тех вещах, которые делают интернет таким крутым. (Я имею в виду JavaScript).

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

Установка

Мы начнём с создания меню навигации, используя маркированный список ul и элементы списка li.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

Так будет выглядеть меню без стилей.

Скучный список элементов меню

Давайте добавим отступы, границы и стили, чтобы этот список стал более похожим на меню.

Элементы меню с добавлением стилей.

Что там с флажками?

Флажки – это очень легкий способ переключаться с одного состояния на другое.

Ставим и убираем флажок.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Даже если мы спрячем флажок так, чтобы его не было видно на странице, когда мы кликаем на ‘menu’, мы всё равно меняем его состояние. Когда мы устанавливаем этот флажок, то содержание меню появляется, а когда убираем его, меню исчезает.

Мы добавим стили для метки флажка, добавляя фоновое изображение для гамбургер-меню. Также мы хотим добиться того, чтобы эта метка выглядела как ссылка, хотя она таковой не является, так что используем cursor:pointer. Наконец, давайте спрячем флажок с помощью display:none.

В результате получаем следующее:

Примечание: Я загрузил иконки, которые использовал из Flat Icon. Ознакомьтесь с ними, там имеется огромный выбор иконок!

Можно изменить фоновое изображение ‘menu’ на ‘close’, используя этот код:

Сворачиваем и разворачиваем

Мы почти закончили! Теперь нужно просто задать состояние по умолчанию, при котором меню будет разворачиваться, когда флажок не установлен. Для этого мы изменим max-height .menu-content на 0, но когда флажок установлен, то max-height будет отображаться как 100%.

Вот и всё! Это действительно быстрый и простой способ добавить разворачивающуюся навигацию, не задействуя JavaScript.

Разворачивающееся меню с использованием только CSS

Я люблю находить различные подходы к решению проблемы. Рассматривать вещи с разных сторон – это круто. Какие ещё CSS приёмы вы пробовали? Совет: Посмотрите видео на YouTube от The Net Ninja, где он объясняет весь этот процесс в подробностях.

Автор: Nadia Hogg

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree