<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF=8">
	<title>GIVEMYTHELOOT</title>
	<link rel="stylesheet" href="style/style.css">
	<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
	<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</div>
</head>
<body>
	<header>
		<div class="logo">
			<a href="index.html"><img class="graficlogo" src="http://dev.hozmagkomi.ru/Templates/default/__load/img/hozmag_logo.png" alt="Logo"></a>
		</div>
		<nav>
<div class="wrapper">
  <div class="menu menu_active">
    <a href="#" class="menu-btn"></a>
			<div class="topnav" id="myTopnav">
				<a href="openButton">BATTLE</a>
				<a href="FAQ.html">FAQ</a>
				<a href="openButton">РЕФЕРАЛЬНАЯ СИСТЕМА</a>
				<a href="openButton">ПРАВИЛА</a>
			</nav>
		</div>
</body>
<script src="script.js"></script>
</body>
</html>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
li{
 text-decoration: none;
 list-style: none;
}
body{ 
font-family: 'Rubik', sans-serif;
 }
 .logo{
 	width: 100%; 
 	height: 80px;
 	display: flex;
 	opacity: 0.90;
    background-color: rgba(111,111,111,0.3)
 }
 .graficlogo{
 	max-width: 100%;
 	box-sizing: border-box;
 }
 .topnav a{
 	padding: 14px 20px;
 	font-size: 25px;
 	display: flex; 
    color: #000;
 }
 .topnav a:hover{ 
background: #fff; 
width: 312px;
transition: 0.2s;
opacity: 0.7;
} 
.topnav{
	background-color: #FFF;
    color: #111;
	width: 350px;
	min-height: 100vh;
	display: flex;
    flex-direction: column;
    background-image: url(http://dev.hozmagkomi.ru/Templates/default/__load/img/bg_top_menu_300.png);
}
header {
    background-image: url(http://dev.hozmagkomi.ru/Templates/default/__load/img/bg_top_menu_300.png);
}
section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.wrapper {
  position: relative;
  overflow-x: hidden;
  background-image: url(../img/bg.png);
}
.menu {
  position: fixed;
  background-color: #fff;
  transition: 0.5s;
  transform: translateX(-100%);
  background-image: url(../img/bg.png);
}
.menu_active {
  transform: translateX(0%);
  background-image: url(../img/bg.png);
}
.menu-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50%;
  flex-direction: column;
}
.menu-list a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
}
.menu-btn {
  width: 30px;
  height: 30px;
  background-color: #111;
  position: absolute;
  right: -35px;
  top: 10px;
}
.content {
  transition: 0.5s;
  position: relative;
  z-index: 0;
}
.content_active {
  transform: translateX(30%);
}
$('.menu-btn').on('click', function(e) {
  e.preventDefault();
  $('.menu').toggleClass('menu_active');
  $('.content').toggleClass('content_active');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.