<div class="full-menu">
<nav id="menu" class="menu">
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="works">Works</li>
<li class="contact">Contact</li>
</ul>
</nav>
</div>
<div class="hamburguer">
<div class="lines line-top"></div>
<div class="lines line-mid"></div>
<div class="lines line-bottom"></div>
</div>
<main class="content">
<h1 id="teste">Imagine all your content here</h1>
</main>
//Variables for change animation and colors of background, menu overlay, text and icons
$transition-type: ease-in;
$overlay-color: #1e88e5;
$texts-and-icons: #fff;
$body-background: url(https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/96.jpg);
//ZOOM EFFECT ON HOVER MENU ICONS AND LINKS
@keyframes zoom {
0%, 100% { transform: scale(1);}
50% { transform: scale(1.1);}
}
// SET BASIC CONTENT - HTML AND BODY
html, body {
overflow: hidden;
line-height: 1.5;
font-family: 'Montserrat', 'Arial', sans-serif;
color: $texts-and-icons;
text-align: center;
}
html, body, .full-menu, .content {
width: 100%;
height: 100%;
}
.full-menu, .content {
display: flex;
align-items: center;
justify-content: center;
}
.content {
background-image: $body-background;
background-size: cover;
font-size: 3em;
}
// SET BASIC CONTENT AND ANIMATION EFFECT- MENU OVERLAY
.full-menu {
position: absolute;
background-color: $overlay-color;
opacity: 0.5;
transform: translateX(100%);
transition: all 400ms $transition-type;
li {
font-size: 4em;
color: $texts-and-icons;
opacity: 0;
transform: translateY(2%);
transition: all 300ms $transition-type;
cursor: pointer;
&:after {
content: "";
position: absolute;
height: 5px;
width: 0%;
left: 0;
bottom: 0;
background-color: $texts-and-icons;
transition: width 200ms $transition-type;
}
&:hover:after { width: 100%;}
}
ul { list-style: none;}
&.active {
transform: translateX(0%);
opacity: 1;
z-index: 0;
.home { transition-delay: .3s;}
.about { transition-delay: .4s;}
.works { transition-delay: .5s;}
.contact { transition-delay: .6s;}
li {
opacity: 1;
transform: translateX(0%);
&:hover {
animation: zoom 200ms $transition-type;
}
}
}
}
// SET BASIC CONTENT AND ANIMATION EFFECT- HAMBURGUER MENU
.hamburguer {
position: absolute;
width: 2em;
height: 2em;
margin: 3em;
z-index: 1;
cursor: pointer;
&:hover {
animation: zoom 300ms $transition-type;
}
}
.lines {
background-color: $texts-and-icons;
width: 100%;
height: 5px;
margin: 5px 0;
transition: all 450ms $transition-type;
}
// SET ANIMATION EFFECT - HAMBURGUER MENU CLOSED
.close-hamburguer {
.lines { cursor: pointer;}
.line-top { transform: translateY(200%) rotate(45deg);}
.line-mid { opacity: 0;}
.line-bottom { transform: translateY(-200%) rotate(135deg);}
}
View Compiled
//Using Vanilla JS
document.querySelector(".hamburguer").addEventListener("click", function(){
document.querySelector(".full-menu").classList.toggle("active");
document.querySelector(".hamburguer").classList.toggle("close-hamburguer");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.