DVV,
на основе кода от
Malleys https://javascript.ru/forum/showthre...788#post518790
<html>
<style>
body {
padding-top: 70px;
font: 14px / 24px Arial, Tahoma, sans-serif;
background: #c0c0c0;
}
ol, ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 10px;
background: #ff0000;
height: 60px;
box-shadow: 0px 0px 13px 5px #000000;
}
.nav {
float: right;
}
.nav li {
float: left;
}
.nav li a,
#touch-menu {
border: 0;
background: none;
display: block;
padding: 12px 15px;
font-weight: bold;
font-size: 16px;
color: #fff;
}
.nav li a:hover {
background: #515572;
}
#touch-menu {
display: none;
}
@media (max-width: 900px) {
body {
padding-top: 60px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
}
.nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
visibility: hidden;
}
.nav li {
float: none;
opacity: 0.9;
text-align: center;
}
.nav li a {
border-top: 1px solid #eee;
border-left: 3px solid transparent;
background-color: hsla(0, 0%, 41%, 1);
color: hsla(0, 0%, 100%, 1);
}
.nav li:first-child a {
border-top: none;
}
.nav li a:hover {
color: #fff;
border-left: 3px solid #515572;
}
#touch-menu {
display: block;
float: right;
height: 50px;
margin: -16px 0;
}
}
.bar1,
.bar2,
.bar3 {
width: 40px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
#touch-menu:focus {
pointer-events: none;
}
#touch-menu:focus .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
#touch-menu:focus .bar2 {
opacity: 0;
}
#touch-menu:focus .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
#touch-menu:focus ~ nav .nav {
visibility: visible;
}
#touch-menu nav .nav li{
opacity: 0;
transition: 500ms;
}
#touch-menu:focus ~ nav .nav li {
opacity: 1;
}
#touch-menu:focus ~ nav .nav li:nth-child(1) {
transition-delay: 400ms
}
#touch-menu:focus ~ nav .nav li:nth-child(2) {
transition-delay: 800ms
}
#touch-menu:focus ~ nav .nav li:nth-child(3) {
transition-delay: 1200ms
}
#touch-menu:focus ~ nav .nav li:nth-child(4) {
transition-delay: 1600ms
}
#touch-menu ~ nav .nav li:nth-child(4) {
transition-delay: 400ms
}
#touch-menu ~ nav .nav li:nth-child(3) {
transition-delay: 800ms
}
#touch-menu ~ nav .nav li:nth-child(2) {
transition-delay: 1200ms
}
#touch-menu ~ nav .nav li:nth-child(1) {
transition-delay: 1600ms
}
</style>
<header class="container">
<button id="touch-menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
<nav>
<ul class="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>
</header>
</html>