Адаптивное меню и шапка для сайта
В этом уроке мы разберем, как сделать адаптивное меню для сайта с красивым появлением при клике на кнопку "меню" для маленьких экранов.
Для тех, кому нужен исходный код, он будет чуть ниже.
Урок будет полезен для всех, кто хочет научиться создавать адаптивное меню. Приятного просмотра.
Видео урок
HTML файл и JavaScript
Адаптивное меню
CSS файл
@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;
}
Комментарии к статье