Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать Крутое Выезжающее Меню с боку на сайте

В этой статье будет весь код, который используется в видео ниже.

HTML Разметка

<div class = "menu-button open-button"></div>
<div class = "menu-block-1"></div>
<div class = "menu-block-2"></div>
<nav>
	<ul>
		<li><a href = "#" class = "menu-link-1 open-button">кто мы</a></li>
		<li><a href = "#" class = "menu-link-2 open-button">портфолио</a></li>
		<li><a href = "#" class = "menu-link-3 open-button">услуги</a></li>
		<li><a href = "#" class = "menu-link-4 open-button">контакты</a></li>
	</ul>
</nav>

CSS Стили

/*Кнопка меню*/
.menu-button
{
	background-color: #222;
	height: 70px;
	width: 70px;
	position: fixed;
	top: 30px;
	right: 30px;
	cursor: pointer;
	z-index: 100;
}
.menu-button:after
{
	content: "";
	background-color: white;
	height: 3px;
	width: 50%;
	position: absolute;
	top: 27px;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.5s ease;
}
.menu-button:hover:after
{
	top: 33px;
}
.menu-button.open-done:after
{
	transform: rotate(45deg);
	left: 17px;
	top: 33px;
}
.menu-button.open-done:hover:after
{
	transform: rotate(45deg);
	left: 17px;
	top: 33px;
}
.menu-button:before
{
	content: "";
	background-color: white;
	height: 3px;
	width: 50%;
	position: absolute;
	top: 43px;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.5s ease;
}
.menu-button:hover:before
{
	transform: rotate(90deg);
	left: 17px;
	top: 33px;
}
.menu-button.open-done:before
{
	transform: rotate(-45deg);
	left: 17px;
	top: 33px;
}
.menu-button.open-done:hover:before
{
	transform: rotate(-45deg);
	left: 17px;
	top: 33px;
}
/*Задвигающиеся блоки*/
.menu-block-1
{
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
	background-color: red;
	transition: 1s;
	z-index: 90;
}
.menu-block-1.open-done
{
	width: 100%;
}
.menu-block-2
{
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
	background-color: #222;
	transition: 1s;
	z-index: 90;
}
.menu-block-2.open-done
{
	width: 100%;
}
/*Навигация*/
nav
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}
nav ul li
{
	margin: 10vh 0;
}
nav ul li a
{
	text-decoration: none;
	text-align: center;
	color: white;
	font-weight: 200;
	font-size: 34px;
	display: block;
	transform: translateX(50px);
	opacity: 0;
	visibility: hidden;
	transition: 0.5s,
				1s opacity,
				1s transform;
}
nav ul li a:hover
{
	color: red;
}
nav ul li a.open-done
{
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

JavaScript Код

$('.open-button').click(function() 
{
        if(!$('.menu-button').hasClass('open-done'))
        {
            $('.menu-button').addClass('open-done');
            $('.menu-block-1').addClass('open-done');
            setTimeout(function(){$('.menu-block-2').addClass('open-done')}, 100);
            setTimeout(function(){$('.menu-link-1').addClass('open-done')}, 500);
            setTimeout(function(){$('.menu-link-2').addClass('open-done')}, 600);
            setTimeout(function(){$('.menu-link-3').addClass('open-done')}, 700);
            setTimeout(function(){$('.menu-link-4').addClass('open-done')}, 800);
        }
        else
        {
            $('.menu-button').removeClass('open-done');
            $('.menu-link-1').removeClass('open-done');
            setTimeout(function(){$('.menu-link-2').removeClass('open-done')}, 100);
            setTimeout(function(){$('.menu-link-3').removeClass('open-done')}, 200);
            setTimeout(function(){$('.menu-link-4').removeClass('open-done')}, 300);
            setTimeout(function(){$('.menu-block-1').removeClass('open-done')}, 800);
            setTimeout(function(){$('.menu-block-2').removeClass('open-done')}, 600);
        }
});


Оставьте свой комментарий внизу