У данного меню есть недостаток, она работает отлично только на мобильной версии, так как собиралось именно под мобильную версию
<div class="menu">
<nav class="menu-nav">
<a href="https://yandex.ru">Main</a>
<a href="#">Porfolio</a>
<a href="#">About</a>
</nav>
<a href="#" class="menu-btn">
<span></span>
</a>
</div>
<style>
.section {
height: 20px;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 30px;
z-index:3333;
}
.menu-btn {
display: block;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 60%;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
position: absolute;
top: 50%; margin-top: -1px;
left: 50%; margin-left: -10px;
width: 20px;
height: 2px;
background-color: #333;
}
.menu-btn span::before,
.menu-btn span::after {
content: '';
display: block;
transition: 0.2s;
}
.menu-btn span::before {
transform: translateY(-5px);
}
.menu-btn span::after {
transform: translateY(5px);
}
.menu-btn_active span:before {
transform: rotate(-35deg);
width: 10px;
transform-origin: left bottom;
}
.menu-btn_active span:after {
transform: rotate(35deg);
width: 10px;
transform-origin: left top;
}
.menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.menu-nav a {
text-decoration: none;
color: #333;
text-transform: uppercase;
font-weight: 100;
font-size: 12px;
font-family: noir pro;
display: inline-block;
margin-right: 20px;
transition: 1s;
}
.menu-nav {
transition: 0.2s;
transform: scaleX(0) translateX(0%);
transform-origin: right center;
opacity: 0;
visibility: hidden;
height: 50px;
line-height: 50px;
background-color: #fff;
padding-right: 40px;
padding-left: 38px;
margin-right: -25px;
margin-left: 20px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.menu-nav_active {
transform: scaleX(1) translateX(0%);
opacity: 1;
visibility: visible;
}
</style>
<script>
$('.menu-btn').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('menu-btn_active');
$('.menu-nav').toggleClass('menu-nav_active');
});
</script>