От автора: когда только начинаешь заниматься разработкой, то смотришь на разные сайты в интернете и думаешь: «Вот же, как бы я хотел сделать что-то подобное…», и понимаешь, скольким вещам ещё нужно научиться. Вы, наверняка, уже задумывались над тем, чего можно добиться, если знать основы HTML и CSS, но не до конца разбираетесь в тех вещах, которые делают интернет таким крутым. (Я имею в виду JavaScript).
Иногда это приносит разочарование, но, в то же время, и подталкивает к поиску менее очевидных решений проблем. Существует много удивительных вещей, которые можно реализовать с помощью одного лишь CSS, и в этой статье я хочу поделиться примерами довольно простых решений для разворачивающегося меню CSS, которые мне удалось найти.
Установка
Мы начнём с создания меню навигации, используя маркированный список ul и элементы списка li.
<div class="collapsible-menu"> <div class="menu-content"> <ul> <li><a href="#"></a>Home</li> <li><a href="#"></a>Services</li> <li><a href="#"></a>Projects</li> <li><a href="#"></a>About</li> <li><a href="#"></a>Blog</li> <li><a href="#"></a>Contacts</li> </ul> </div> </div>
Дальше добавим флажок с меткой Menu над тэгом div, который содержит контент меню. Позже мы оформим для него стили, чтобы запустить открытие и закрытие меню.
<body> <div class="collapsible-menu"> <input type="checkbox" id="menu"> <label for="menu">Menu</label> <div class="menu-content"> <ul> <li><a href="#"></a>Home</li> <li><a href="#"></a>Services</li> <li><a href="#"></a>Projects</li> <li><a href="#"></a>About</li> <li><a href="#"></a>Blog</li> <li><a href="#"></a>Contacts</li> </ul> </div> </div> </body>
Так будет выглядеть меню без стилей.
Скучный список элементов меню
Давайте добавим отступы, границы и стили, чтобы этот список стал более похожим на меню.
.menu-content { font-family: 'Oswald', sans-serif; padding: 0 0 0 50px;
}
.collapsible-menu { background-color: rgb(255, 255, 255); padding: 0px 30px; border-bottom: 3px solid #CDE700; box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
.collapsible-menu ul { list-style-type: none; padding: 0;
}
.collapsible-menu a { display:block; padding: 10px; text-decoration: none;
}
Элементы меню с добавлением стилей.
Что там с флажками?
Флажки – это очень легкий способ переключаться с одного состояния на другое.
Ставим и убираем флажок.
Даже если мы спрячем флажок так, чтобы его не было видно на странице, когда мы кликаем на ‘menu’, мы всё равно меняем его состояние. Когда мы устанавливаем этот флажок, то содержание меню появляется, а когда убираем его, меню исчезает.
Мы добавим стили для метки флажка, добавляя фоновое изображение для гамбургер-меню. Также мы хотим добиться того, чтобы эта метка выглядела как ссылка, хотя она таковой не является, так что используем cursor:pointer. Наконец, давайте спрячем флажок с помощью display:none.
.collapsible-menu label { font-family: 'Sedgwick Ave Display', cursive; font-size: 56px; display: block; cursor: pointer; background: url(menu.png) no-repeat left center; padding: 10px 0 10px 50px;
}
input#menu { display: none;
}
В результате получаем следующее:
Примечание: Я загрузил иконки, которые использовал из Flat Icon. Ознакомьтесь с ними, там имеется огромный выбор иконок!
Можно изменить фоновое изображение ‘menu’ на ‘close’, используя этот код:
input:checked +label { background-image: url(close.png);
}
Сворачиваем и разворачиваем
Мы почти закончили! Теперь нужно просто задать состояние по умолчанию, при котором меню будет разворачиваться, когда флажок не установлен. Для этого мы изменим max-height .menu-content на 0, но когда флажок установлен, то max-height будет отображаться как 100%.
.menu-content { max-height: 0; overflow: hidden; font-family: 'Oswald', sans-serif; padding: 0 0 0 50px;
}
/* Эффект переключения*/
input:checked ~ label { background-image: url(close.png);
}
input:checked ~ .menu-content { max-height: 100%;
}
Вот и всё! Это действительно быстрый и простой способ добавить разворачивающуюся навигацию, не задействуя JavaScript.
Разворачивающееся меню с использованием только CSS
Я люблю находить различные подходы к решению проблемы. Рассматривать вещи с разных сторон – это круто. Какие ещё CSS приёмы вы пробовали? Совет: Посмотрите видео на YouTube от The Net Ninja, где он объясняет весь этот процесс в подробностях.
Автор: Nadia Hogg
Источник: https://codeburst.io/
Редакция: Команда webformyself.