<!--MENU-->
<div class="menu">
<div class="label"> ☰</div>
<div class="spacer"></div>
<div class="item"><span>Home</span></div>
<div class="item"><span>About</span></div>
<div class="item"><span>Team</span></div>
<div class="item"><span>Services</span></div>
<div class="item"><span>Projects</span></div>
<div class="item"><span>Contact</span></div>
</div>
/MENU/
.menu {
text-transform: uppercase;
color: white;
display: block;
cursor: pointer;
pointer-events: none;
position: absolute;
bottom: 20px;
right: 0;
top: 15px;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 300;
z-index: 999;
position: fixed;
max-height: fit-content;
}
.menu:hover {
pointer-events: all;
}
.label {
display: block;
cursor: pointer;
pointer-events: all;
text-align: right;
margin-right: 15px;
margin-top: -5px;
font-size: 25px;
}
.spacer {
display: block;
width: 80px;
margin: 8px 95px 35px;
cursor: pointer;
position: relative
}
.spacer:before {
content: "";
position: absolute;
border-bottom: 1px solid #ffffff;
height: 1px;
width: 0%;
transition: width 0.3s ease;
transition-delay: 0.7s;
}
.item {
position: relative;
display: block;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
opacity: 0;
transition: opacity 0.5s ease, top 0.5s ease;
transition-delay: 0;
}
span {
transition: color 0.5s ease;
}
.item:hover span {
text-shadow: 2px 2px 5px white;
}
.menu:hover .spacer:before {
width: 100%;
transition-delay: 0s;
}
.menu:hover .item {
opacity: 1;
top: 0px;
}
.item:nth-child(1) {
transition-delay: 0.45s;
}
.item:nth-child(2) {
transition-delay: 0.4s;
}
.item:nth-child(3) {
transition-delay: 0.35s;
}
.item:nth-child(4) {
transition-delay: 0.3s;
}
.item:nth-child(5) {
transition-delay: 0.25s;
}
.item:nth-child(6) {
transition-delay: 0.2s;
}
.item:nth-child(7) {
transition-delay: 0.15s;
}
.item:nth-child(8) {
transition-delay: 0.1s;
}
.item:nth-child(9) {
transition-delay: 0.05s;
}
.item:nth-child(10) {
transition-delay: 0s;
}
.menu:hover .item:nth-child(1) {
transition-delay: 0.25s;
}
.menu:hover .item:nth-child(2) {
transition-delay: 0.3s;
}
.menu:hover .item:nth-child(3) {
transition-delay: 0.35s;
}
.menu:hover .item:nth-child(4) {
transition-delay: 0.4s;
}
.menu:hover .item:nth-child(5) {
transition-delay: 0.45s;
}
.menu:hover .item:nth-child(6) {
transition-delay: 0.5s;
}
.menu:hover .item:nth-child(7) {
transition-delay: 0.55s;
}
.menu:hover .item:nth-child(8) {
transition-delay: 0.6s;
}
.menu:hover .item:nth-child(9) {
transition-delay: 0.65s;
}
.menu:hover .item:nth-child(10) {
transition-delay: 0.7s;
}