Адаптивное меню и шапка для сайта
В этом уроке мы разберем, как сделать адаптивное меню для сайта с красивым появлением при клике на кнопку "меню" для маленьких экранов.
Для тех, кому нужен исходный код, он будет чуть ниже.
Урок будет полезен для всех, кто хочет научиться создавать адаптивное меню. Приятного просмотра.
Видео урок
HTML файл и JavaScript
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Адаптивное меню</title>
<script>
window.onload = function () {
const btn = document.querySelector('.btn__show-menu');
const menu = document.querySelector('.mobile__menu');
btn.addEventListener('click', function(){
menu.classList.toggle('mobile__menu-active');
btn.classList.toggle('toggle');
if(ctn.classList.contains('toggle')) {
btn.innerHTML = 'Скрыть';
}else {
btn.innerHTML = 'Меню';
}
});
}
</script>
</head>
<body>
<div class="wrapper">
<div class="maincontent">
<header class="header">
<div class="contaner container-header">
<div class="block__logo"><a href="#" class="logo">use-web</a></div>
<div class="desktop__menu">
<nav class="nav">
<div class="menu__list">
<div class="menu__item"><a href="#" class="menu__link">Главная</a></div>
<div class="menu__item"><a href="#" class="menu__link">Пройти тесты</a></div>
<div class="menu__item"><a href="#" class="menu__link">Темы блога</a></div>
<div class="menu__item"><a href="#" class="menu__link">Вход</a></div>
<div class="menu__item"><a href="#" class="menu__link">Регистрация</a></div>
</div>
</nav>
<div class="btn__show-menu">Меню</div>
</div>
</div>
</header>
</div>
<div class="mobile__menu">
<div class="mobile__menu-left"></div>
<div class="mobile__menu-right"></div>
<nav class="nav">
<div class="menu__list">
<div class="menu__item"><a href="#" class="menu__link">Главная</a></div>
<div class="menu__item"><a href="#" class="menu__link">Пройти тесты</a></div>
<div class="menu__item"><a href="#" class="menu__link">Темы блога</a></div>
<div class="menu__item"><a href="#" class="menu__link">Вход</a></div>
<div class="menu__item"><a href="#" class="menu__link">Регистрация</a></div>
</div>
</nav>
</div>
</div>
</body>
</html>
]]>
CSS файл
<![CDATA[
@mixin adapt($num) {
@media screen and (max-width: $num) {
@content;
}
}
@mixin font($f:'Rm', $s:18px, $c:#fff ) {
font-family: $f;
font-size: $s;
color: $c;
}
@font-face {
font-family: 'Rm';
src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
url('../fonts/roboto-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gagalin';
src: url('../fonts/gagalin-regular-webfont.woff2') format('woff2'),
url('../fonts/gagalin-regular-webfont.woff') format('woff'),
url('../fonts/gagalin-regular-webfont.svg#gagalinregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100vh;
background: url(images/bear.jpg) no-repeat;
background-position: 100% 100%;
background-size: cover;
}
.header {
width: 100%;
height: 100px;
}
.contaner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
@include adapt(992px) {
max-width: 992px;
}
@include adapt(768px) {
max-width: 768px;
}
@include adapt(480px) {
max-width: 480px;
padding: 0 16px;
}
@include adapt(320px) {
max-width: 320px;
}
}
.container-header {
display: flex;
justify-content: space-between;
align-items: center;
@include adapt(480px) {
flex-direction: column;
}
}
.block__logo {
@include adapt(480px){
margin-top: 10px;
}
}
.logo {
text-decoration: none;
@include font('Gagalin', 50px);
cursor: pointer;
}
.desktop__menu {
.menu__list {
display: flex;
}
.menu__item {
margin-right: 10px;
&:last-child{
margin-right: 0;
}
}
.menu__link {
@include font();
text-decoration: none;
transition: color .3s ease-in-out;
cursor: pointer;
&:hover{
color: rgb(241,15,15);
}
}
.nav {
@include adapt(860px) {
display: none;
}
}
}
.btn__show-menu {
display: none;
@include adapt(860px) {
display: flex;
justify-content: center;
align-items: center;
@include font('Rm', 18px, rgb(88,88,88));
width: 100px;
height: 30px;
background-color: #f6f6f6;
border-radius: 3px;
position: relative;
transition: .5s ease-in-out;
cursor: pointer;
}
@include adapt(480px){
margin-top: 5px;
}
}
.mobile__menu {
z-index: -10;
overflow: hidden;
height: 0;
.nav {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%,0);
opacity: 0;
transition: opacity 0.5s ease-in-out
}
.menu__item{
margin-top: 10px;
text-align: center;
&:first-child {
margin-top: 0;
}
}
.menu__link{
@include font('Gagalin', 30px, rgb(88,88,88));
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: color .3s ease-in-out;
&:hover {
color: rgb(204,165,165);
}
@include adapt(480px){
font-size: 24px
}
}
}
.mobile__menu-left,
.mobile__menu-right {
position: absolute;
top: 0;
bottom: 0;
width: 0;
background-color: rgba(#f6f6f6, 0.6);
transition: width .5s ease-in-out;
}
.mobile__menu-left{
left: 0;
}
.mobile__menu-right {
right: 0;
}
.mobile__menu-active {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
overflow: visible;
height: 100%;
.mobile__menu-left,
.mobile__menu-right{
width: 50%;
}
.nav {
opacity: 1;
}
}
.toggle{
z-index: 20;
background-color: rgb(206,114,144);
color: #f6f6f6;
}
]]>
Комментарии к статье