В данном уроке мы создадим базовое адаптивное меню навигации, где предусмотрено выпадающие меню, которое использует только HTML и CSS3. Многие навигационные меню, где особенно адаптивные или отзывчивые создаются с использованием комбинации HTML, CSS и Javascript, но в нашем случай скрипта не предусмотрено. Этот простой CSS-метод покажет, что на чистом стиле CSS можно создать отличное меню по дизайну, а также по своим функциям.
С открытием страницы или сайта:
В адаптивном режиме:
При клике для вызова в мобильном аппарате:
Установочный процесс:
В head
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
HTML
Код
<header>
<h2>ZORNET.RU</h2>
<input class="aresponsive" id="navigation" type="checkbox"/>
<label class="open" for="navigation">
<i class="fa fa-bars"></i>
</label>
<nav>
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">СКРИПТЫ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
<label class="navoneg" for="navigation">
<i class="fa fa-times"></i>
</label>
</nav>
</header>
CSS
Код
header {
min-height: 100px;
background: linear-gradient(-45deg, #1376a9, #28946f);
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 4px 0 rgba(21, 21, 21, 0.2);
}
.aresponsive{
position: absolute;
visibility: hidden;
left: -9999px;
}
label{
font-size: 30px;
cursor: pointer;
display: none;
}
ul{
list-style-type: none;
display: flex;
}
a {
display: block;
text-transform: uppercase;
text-decoration: none;
padding: 0 15px;
transition: .4s;
}
a:hover{
color: #3498db;
}
@media screen and (max-width:800px){
.open,.navoneg{
display: block;
max-width:800px;
}
.navoneg{
position: absolute;
top: 40px;
right: 40px;
}
.aresponsive:checked ~ nav{
right: 0;
}
nav{
position: fixed;
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #00537e, #3aa17e);
top: 0;
right: -100%;
text-align: center;
padding: 100px 0;
transition: .7s
}
ul{
flex-direction: column;
}
a{
padding: 20px;
}
a:hover{
background-color: rgba(255,255,255,.03);
}
}
Это простая версия навигации, так как она была по дизайну немного доработана, где добавлены стили, и теперь это горизонтальное меню в адаптивной верстке по эффектам по другому смотрится.
Демонстрация
