Бургер меню на CSS3 и jQuery

Разместил: Apocalypse
12 июля 2016

Отличная менюшка для кулинарных сайтов. Всё выполнено на чистом CSS Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.l-nav-wrapper {
margin: auto;
width: 160px;
}

.l-nav-wrapper:after {
content: "";
display: block;
border-radius: 5px 5px 50px 50px;
margin: 10px -20px;
height: 30px;
background-image: -webkit-linear-gradient(top, #8b4726, #63331b);
background-image: linear-gradient(to bottom, #8b4726, #63331b);
}

.b-nav,
b-nav__item {
list-style: none;
padding: 0px;
margin: 0px;
}

.b-nav {
display: none;
}

.b-nav-heading {
display: block;
position: relative;
margin: 10px -20px;
padding: 40px 0 10px 0;
border-radius: 100px 100px 10px 10px;
text-align: center;
width: 200px;
overflow: hidden;
font: 20px/20px Bungee;
color: #ff0;
text-shadow: 2px 2px 2px black;
cursor: pointer;
}

.b-nav-heading:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-image: -webkit-linear-gradient(top, #8b4726, #63331b);
background-image: linear-gradient(to bottom, #8b4726, #63331b);
}

.b-nav-heading:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
width: 5px;
height: 4px;
box-shadow: 163px 30px 0 #ffd39b, 56px 17px 0 #ffd39b, 119px 24px 0 #ffd39b, 148px 16px 0 #ffd39b, 134px 11px 0 #ffd39b, 42px 18px 0 #ffd39b, 115px 11px 0 #ffd39b, 157px 12px 0 #ffd39b, 22px 28px 0 #ffd39b, 102px 17px 0 #ffd39b, 92px 4px 0 #ffd39b, 50px 12px 0 #ffd39b, 23px 23px 0 #ffd39b, 112px 2px 0 #ffd39b, 167px 30px 0 #ffd39b, 27px 3px 0 #ffd39b, 25px 20px 0 #ffd39b, 69px 30px 0 #ffd39b, 72px 8px 0 #ffd39b, 142px 20px 0 #ffd39b, 135px 9px 0 #ffd39b, 92px 28px 0 #ffd39b, 117px 17px 0 #ffd39b, 80px 29px 0 #ffd39b, 21px 27px 0 #ffd39b, 54px 9px 0 #ffd39b, 51px 8px 0 #ffd39b, 28px 15px 0 #ffd39b, 46px 13px 0 #ffd39b, 139px 5px 0 #ffd39b;
border-radius: 5px;
}

.b-nav__item {
display: block;
box-sizing: border-box;
text-align: center;
padding: 0;
margin: 0 auto 16px auto;
background-color: gold;
border-radius: 5px;
}

.b-nav__item:hover {
background-color: #8b0000;
}

.b-nav__item:hover > .b-nav__link {
color: gold;
}

.b-nav__link {
font: 15px/31px Bungee;
color: #4f2816;
text-decoration: none;
}

.l-nav-wrapper {

margin: auto;

width: 160px;

}

.l-nav-wrapper:after {

content: "";

display: block;

border-radius: 5px 5px 50px 50px;

margin: 10px -20px;

height: 30px;

}

.b-nav,

b-nav__item {

list-style: none;

padding: 0px;

margin: 0px;

}

.b-nav {

display: none;

}

.b-nav-heading {

display: block;

position: relative;

margin: 10px -20px;

padding: 40px 0 10px 0;

border-radius: 100px 100px 10px 10px;

text-align: center;

width: 200px;

overflow: hidden;

font: 20px/20px Bungee;

color: #ff0;

text-shadow: 2px 2px 2px black;

cursor: pointer;

}

.b-nav-heading:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -2;

}

.b-nav-heading:after {

content: "";

position: absolute;

z-index: -1;

top: 0px;

left: 0px;

width: 5px;

height: 4px;

box-shadow: 163px 30px 0 #ffd39b, 56px 17px 0 #ffd39b, 119px 24px 0 #ffd39b, 148px 16px 0 #ffd39b, 134px 11px 0 #ffd39b, 42px 18px 0 #ffd39b, 115px 11px 0 #ffd39b, 157px 12px 0 #ffd39b, 22px 28px 0 #ffd39b, 102px 17px 0 #ffd39b, 92px 4px 0 #ffd39b, 50px 12px 0 #ffd39b, 23px 23px 0 #ffd39b, 112px 2px 0 #ffd39b, 167px 30px 0 #ffd39b, 27px 3px 0 #ffd39b, 25px 20px 0 #ffd39b, 69px 30px 0 #ffd39b, 72px 8px 0 #ffd39b, 142px 20px 0 #ffd39b, 135px 9px 0 #ffd39b, 92px 28px 0 #ffd39b, 117px 17px 0 #ffd39b, 80px 29px 0 #ffd39b, 21px 27px 0 #ffd39b, 54px 9px 0 #ffd39b, 51px 8px 0 #ffd39b, 28px 15px 0 #ffd39b, 46px 13px 0 #ffd39b, 139px 5px 0 #ffd39b;

border-radius: 5px;

}

.b-nav__item {

display: block;

box-sizing: border-box;

text-align: center;

padding: 0;

margin: 0 auto 16px auto;

background-color: gold;

border-radius: 5px;

}

.b-nav__item:hover {

background-color: #8b0000;

}

.b-nav__item:hover > .b-nav__link {

color: gold;

}

.b-nav__link {

font: 15px/31px Bungee;

color: #4f2816;

text-decoration: none;

}

2#: HTML код меню:

<nav class="l-nav-wrapper">
<h2 class="b-nav-heading">Бургер Меню &#9776</h2>
<ul class="b-nav">
<li class="b-nav__item">
<a class="b-nav__link" href="#">Пункт меню
</a>
</li>
<li class="b-nav__item">
<a class="b-nav__link"  href="#">Пункт меню
</a>
</li>
<li class="b-nav__item">
<a class="b-nav__link"  href="#">Пункт меню
</a>
</li>
<li class="b-nav__item">
<a class="b-nav__link"  href="#">Пункт меню
</a>
</li>
<li class="b-nav__item">
<a class="b-nav__link"  href="#">Пункт меню
</a>
</li>
</ul>
</nav>

<script>
$(document).ready(function(){
$('.b-nav-heading').click(function(){
$('.b-nav').slideToggle(300);
});
});
</script>

<h2 class="b-nav-heading">Бургер Меню &#9776</h2>