maxg5,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.site{
background-color: #fff;
position: relative;
transition: background-color .3s .4s;
}
.primary-menu{
width: 330px;
height: 100%;
position: absolute;
left: -330px;
transition: left .7s;
background-color: rgba(69, 43, 18, 1);
}
.site.open{
transition-delay: 0s;
background-color: rgba(17,17,17,0.4)
}
.site.open .primary-menu{
left: 0;
}
.burger{
position: fixed;
width: 40px;
height: 40px;
background-image: url(http://da-strateg.ru/wp-content/uploads/2015/12/menu.png);
background-size: cover;
}
.site.open .burger{
background-image: url(http://100грузов.рф/wp-content/uploads/2016/04/close-icon.png);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
var site = $(".site");
$(".burger").click(function () {
site.toggleClass("open");
});
});
</script>
</head>
<body class="site">
<div class="primary-menu"></div>
<div class="burger"></div>
</body>
</html>