Выезжающий бургер на CSS+JQuery своими руками

Всем привет! Сегодня захотелось поделиться знаниями по созданию выезжающего бургера выполненного «своими руками» на CSS и JQuery.

Давайте разобьем создание бургера по шагам:

Как он будет работать?

Выводим кнопку (бургер) в левом углу сайта, по клику на которую заставляем выезжать с левой стороны окно (меню сайта в нашем случае) бургера. Конечно так-же должна присутствовать кнопка закрыть. По клику на фон вне окна бургера, так же закрываем его.

к содержанию ↑

HTML разметка

Для начала давайте сверстаем страницу с нашим бургером.

<html>	
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-language" content="ru" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<title>Создание бургера своими руками CSS + JQuery By Andrey Shevchuk</title>
	</head>
	<body>
		<div  onclick="burger()" id="burgerOverlay"></div>
		<div id="burger">
			<div onclick="burger()" class="close-popup"></div>
			<ul class="navigation">
				<li><a class="active"  href="#" title="Главная">Главная</a></li>
				<li><a  href="#"  title="Обо мне">Обо мне</a></li>
				<li><a  href="#"  title="Мой блог">Блог</a></li>
			</ul>
		</div> 
		
		<!--BUTTON-->
		<div onclick="burger()" id="menuToggle"><i class="fa fa-bars"></i></div>
		
		<!--STYLES-->
		<link rel="stylesheet" type="text/css" href="./css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		
		<!--SCRIPTS-->
		<script src="./js/jquery.min.js"></script>
		<script src="./js/main.js"></script>
	</body>
</html>
к содержанию ↑

Пишем механику на JQuery

Теперь давайте оживим нашу верстку с Бургером. Напишем функции на JQuery которые будут выполнять механическую работу: показывать и прятать бургер, а так же выделять активные и не активные пункты меню при клике на них.

Для примера я создал файлик: js/main.js

//Burger by Andrey Shevchuk, shevchuk-studio.pw, office@shevchuk-studio.pw, skype: andrew.shevchuk2
function burger()
{
	if($('#burger').is(':visible'))
	{ 
		$("#burgerOverlay").fadeOut();
		$("#burger").animate({right: '-'+$(this).width()+'px',}, 300, function() {$(this).css('display',"none")});
	}else
	{	$("#burgerOverlay").fadeIn();
		$("#burger").css('display',"block").animate({right: '0px'}, 300);
	}
}

$(document).ready(function() 
{
	$("#burger .navigation li a").click(function() 
	{
		$("#burger .navigation li a").removeClass('active');
		$(this).addClass('active');
		return false;
	});			
});			
к содержанию ↑

Добавляем стили CSS

Ну и в завершении, облагородим наше творчество CSS стилями.

Для примера я создал файлик: css/style.js

body{font-family: 'Roboto Condensed', sans-serif; line-height: 1.5; font-size:12pt; margin:auto;}

/* Burger button */
#menuToggle
{
    top: 20px;
    right: 20px;
    z-index: 2;
    display: block;
    text-align: center;
    font-size: 25px;
    color: #fff;
    padding: 8px;
    cursor: pointer;
    position: fixed;
    padding-top: 8px;
    background: #323232;
}
#menuToggle:hover
{ 
	background: #ffbb34;
}
/* Burger button End */

/* Burger window */
#burgerOverlay{   
    width: 100%;
    height: 100%;
    position: FIXED;
    z-index: 999;
    top: 0PX;
    display: NONE;
    background:#3f3d3e5c;
    cursor:pointer;
}
#burger ul li a:hover, #burger ul li a.active
{
    background: #ffbb34;
}
#burger ul li i
{
	font-size:16pt;
}
#burger{
	display:none;
	position: fixed;
    right: -300px;
    top: 0;
    height: 100%;
    background: #3f3d3e;
    z-index: 1000;
    max-width: 262px;
    width: 100%;
	overflow:auto;
}
#burger ul li a{ 
    color: #fff;
    display: block;
    text-decoration: none !important;
    font-size: 12pt;
	padding: 5px 25px 5px 25px;
}
#burger ul {
	margin-top: 60px;
    list-style: none;
    padding: 0;
}
.close-popup:hover{opacity:1;}
.close-popup{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	opacity:0.5;
}
.close-popup:before{
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px;
	width: 25px;
	top: 18px;
	right: 0px;
	transform: rotate(-45deg);
}
.close-popup:after{
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px; 
	width: 25px;
	top: 18px;
	transform: rotate(45deg);
	right: 0px;
}#burger .close-popup:before {
	content: '';
	background-color: #fff !important;
}#burger  .close-popup:after{
	content: '';
	background-color: #fff !important;
}
/* Burger window end */

к содержанию ↑

Результат

Уже собранную версию можно скачать у меня на GitHub.

Спасибо за просмотр.

Напишите пожалуйста в комментариях что Вы думаете об этом решении и как делаете Вы «бургер» на сайте?

[Всего голосов: 8    Средний: 3.6/5]