Как сделать меню для сайта на чистом CSS?
Доброго времени суток, друзья. Частой задачей при разработки сайта или приложения является создание меню с целью лучшей навигации. Есть несколько путей решения этой задачи: либо с помощью CSS, либо с использованием JS. В данной статье я хочу показать вам путь решения этой задачи по средствам только одного CSS. Приступим.
Видео по теме:
Создание HTML макета
Для начала нам потребуется создать саму верстку по средам HTML тегов. Давайте же сделаем это.
<nav>
<div class="wrapper">
<label for="menuToggle">Меню</label>
<input id="menuToggle" type="checkbox">
<ul class="menu clearfix">
<li><a href="#">Главная</a></li>
<li><a href="#">Страница1</a></li>
<li><a href="#">Страница2</a></li>
<li><a href="#">Страница3</a></li>
<li><a href="#">О нас</a></li>
</ul>
</div>
</nav>
<section class="b-content">
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis
autem consequatur eum facere neque. Tenetur laboriosam
repellendus neque fuga, velit, totam, est, aspernatur
sunt sapiente earum quo beatae. Fuga, officia.
</div>
</section>
Добавление основных CSS стилей
html{
height: 100%;
font-size: 18px;
}
.menu{
list-style-type: none;
margin: 0;
padding: 0;
}
nav{
background: #4c3167;
}
.menu li{
float: left;
}
.menu li a {
display: inline-block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
}
section{
padding-top: 10px;
}
.wrapper{
max-width: 1024px;
padding: 0 30px;
margin: 0 auto;
}
.b-content{
height: 100%;
background: #c1aaff;
color: #000;
}
.menuToggle{
padding: 10px 15px;
cursor: pointer;
color: #fff;
display: none;
}
body{
height: 100%;
}
nav input{
display: none;
}
nav label{
padding: 10px 15px;
color: #fff;
display: none;
}
Добавление стилей для мобильной версии
@media ( max-width: 670px) {
nav label{
display: block;
}
#menuToggle:checked + .menu{
display: block;
position: absolute;
background: #4c3167;
width: 100%;
margin-left: -30px;
padding-left: 28px;
}
.menu li{
float: none;
}
.menu{
display: none;
}
}
Это все что нужно для для создания меню на чистом CSS. Давайте поподробнее рассмотрим как это все работает. У нас есть обычный список в котором мы храним меню. Мы добавляем checkbox с помощью которого мы будем хранить состояния и тег <label> который будет у нас в роли кнопки меню на мобильных устройствах.
<label for="menuToggle">Меню</label>
<input id="menuToggle" type="checkbox">
Скрываем сам checkbox и оставляем смену состояния только тегу <label>.
Теперь добавляем стили которые будут показывать блок меню если мы кликае по тегу <label> и скрывать его по второму клику.
#menuToggle:checked + .menu{
display: block;
position: absolute;
background: #4c3167;
width: 100%;
margin-left: -30px;
padding-left: 28px;
}
Данная статья подошла к концу. Тут я оставил для вас исходник на GitHub. Сегодня мы рассмотрели пример того как на нативном CSS c использование checkbox можно создать полноценно адаптивное меню для мобильных устройств. C вами был Corvax. Да новых встреч!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Комментарии:
Создание меню на чистом CSS: 1 комментарий