3 способа переключения видимости мобильной навигации в CSS
Как фронтенд-разработчику, мне иногда нужно изменить видимость мобильной навигации или других элементов пользовательского интерфейса без использования JavaScript. Хотя на первый взгляд это может показаться сложным, вы можете легко сделать это с помощью CSS. В этой статье я покажу вам три простых способа сделать это.
1. Checkbox Hack
Hack с флажками — это гениальный способ использовать псевдокласс :checked для манипулирования другими элементами.
HTML:
<label for="menuToggle" class="menu-toggle">Menu</label>
<input type="checkbox" id="menuToggle" class="menu-checkbox">
<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS:
.menu-toggle {
cursor: pointer;
background-color: #333;
color: #fff;
padding: .5rem 1rem;
}
.menu-checkbox {
display: none;
}
.mobile-nav {
display: none;
}
.menu-checkbox:checked ~ .mobile-nav {
display: block;
}2. Использование псевдокласса :focus-within
Использование псевдокласса :focus-within — еще один удобный способ переключения видимости.
HTML:
<a href="#" class="menu-toggle">Menu</a>
<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS:
.menu-toggle {
background-color: #333;
color: #fff;
padding: .5rem 1rem;
text-decoration: none;
}
.mobile-nav {
display: none;
}
.menu-toggle:focus-within + .mobile-nav {
display: block;
}3. Использование псевдокласса :target
Этот метод основан на псевдоклассе :target, который срабатывает, когда элемент с идентификатором соответствует текущему фрагменту URL-адреса.
HTML:
<div id="mobileNav">
<a href="#mobileNav" class="menu-toggle menu-open">Menu</a>
<a href="#" class="menu-toggle menu-close">Close</a>
<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>CSS:
.menu-toggle {
background-color: #333;
color: #fff;
padding: .5rem 1rem;
text-decoration: none;
}
#mobileNav:not(:target) .mobile-nav,
#mobileNav:not(:target) .menu-close {
display: none;
}
#mobileNav:target .menu-open {
display: none;
}Заключение
Вы можете легко изменить видимость мобильной навигации, используя только CSS. Таким образом, разработчики внешнего интерфейса могут создавать интерактивные функции, которые обычно создаются с помощью JavaScript. Но обязательно проверьте, соответствует ли он потребностям вашего проекта и доступен ли он. В определенных ситуациях использование JavaScript может оказаться лучшим выбором, особенно для сложных задач или для помощи пользователям, использующим вспомогательные технологии.
