Есть меню для сайта, ниже всё в одном файле html, при желании скопируйте и откройте в браузере, оно интересное.
На CSS не обращайте внимания, интересует помощь в закрытии меню, непосредственно при клике на ссылки в нем(пункты меню. При нажатии на "close-btn" оно закрывается, а на пункты нет. JS файлы внизу.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width? initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
body,html {
font-family: 'Montserrat';
margin: 0;
}
body a {
text-decoration: none;
}
header {
padding: 2em;
}
header .logo {
color: black;
font-weight: bold;
}
header .menu-btn {
width: 18px;
float: right;
cursor: pointer;
}
header .menu-btn:before {
content: 'menu';
color: black;
font-size: 0.5em;
}
section {
padding: 4em;
}
section h1 {
font-size: 4em;
margin: 1em auto;
width: 70%;
}
section h1 &::before {
content: ' ';
border-top: 5px solid lightgrey;
}
nav {
position: absolute;
background: black;
padding: 2em;
width: calc(100% - 4em);
height: calc(100vh - 4em);
display: none;
transform: scaleX(0);
transform-origin: right;
}
nav .close-btn {
width: 18px;
float: right;
cursor: pointer;
opacity: 0;
}
nav ul {
list-style-type: none;
margin: 10% auto 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 25%);
width: 80%;
}
nav ul a {
color: white;
font-weight: bold;
font-size: 1.4em;
}
nav ul span {
color: grey;
display: block;
font-size: 0.75em;
margin-top: 20px;
}
nav li {
opacity: 0;
}
.show-menu {
display: block;
animation: slide-menu .5s ease-in forwards;
}
.show-menu .close-btn {
animation: show-x 1s 1s forwards;
}
.show-menu li:nth-of-type(1) {
animation: menu-item-anim .6s forwards 1s ease-in-out;
}
.show-menu li:nth-of-type(2) {
animation: menu-item-anim .6s forwards 1.2s ease-in-out;
}
.show-menu li:nth-of-type(3) {
animation: menu-item-anim .6s forwards 1.4s ease-in-out;
}
.show-menu li:nth-of-type(4) {
animation: menu-item-anim .6s forwards 1.6s ease-in-out;
}
@keyframes slide-menu {
from {
transform: scaleX(0);
opacity: 0;
}
to {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes show-x {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes menu-item-anim {
from {
transform: translateY(30%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
<title>Megamenu</title>
</head>
<body>
<nav id="overlay">
<img src="images/close-btn.svg" class="close-btn" id="close-menu">
<ul>
<li>
<a href="#">Главная</a>
<span>Дополнительный текст</span>
</li>
<li>
<a href="#">Услуги</a>
<span>Дополнительный текст</span>
</li>
<li>
<a href="#">Продано</a>
<span>Дополнительный текст</span>
</li>
<li>
<a href="#">Контакты</a>
<span>Дополнительный текст</span>
</li>
</ul>
</nav>
<header>
<a href="#" class="logo">slava broker pro</a>
<img src="images/menu-btn.svg" class="menu-btn" id="open-menu">
</header>
<section>
<h1>this is fancy</h1>
</section>
<script type="text/javascript">
var overlay = document.getElementById('overlay');
var closeMenu = document.getElementById('close-menu');
document.getElementById('open-menu').addEventListener('click', function() {
overlay.classList.add('show-menu');
})
document.getElementById('close-menu').addEventListener('click', function() {
overlay.classList.remove('show-menu');
})
</script>
</body>
</html>
