<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="overlay overlay-slide-left" id="overlay">
<nav>
<ul>
<li id="nav-1" class="slide-out-1"><a href="#home">Home</a></li>
<li id="nav-2" class="slide-out-2"><a href="#about">About</a></li>
<li id="nav-3" class="slide-out-3"><a href="#skills">Skills</a></li>
<li id="nav-4" class="slide-out-4"><a href="#projects">Projects</a></li>
<li id="nav-5" class="slide-out-5"><a href="#contact">contact</a></li>
</ul>
</nav>
</div>
<div class="menu-bars" id="menu-bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- Sections -->
<section id="home"><a href="#0" target="_blank">Ravi Singh</a></section>
<section id="about">
<h1>Learn More About Me</h1>
</section>
<section id="skills">
<h1>These Are My Strengths</h1>
</section>
<section id="projects">
<h1>These Are My Results</h1>
</section>
<section id="contact">
<h1>Available Anytime</h1>
</section>
<script>
const menuBars = document.getElementById('menu-bars');
const overlay = document.getElementById('overlay');
const nav1 = document.getElementById('nav-1');
const nav2 = document.getElementById('nav-2');
const nav3 = document.getElementById('nav-3');
const nav4 = document.getElementById('nav-4');
const nav5 = document.getElementById('nav-5');
const navItems = [nav1, nav2, nav3, nav4, nav5]
// Event Listners
const navAnimation = (direction1, direction2) => {
navItems.forEach((nav, i) => {
nav.classList.replace(`slide-${direction1}-${i + 1}`, `slide-${direction2}-${i + 1}`)
})
}
const toggleNav = () => {
menuBars.classList.toggle('change');
overlay.classList.toggle('overlay-active');
if (overlay.classList.contains('overlay-active')) {
overlay.classList.replace('overlay-slide-left', 'overlay-slide-right')
navAnimation('out', 'in')
} else {
overlay.classList.replace('overlay-slide-right', 'overlay-slide-left')
navAnimation('in', 'out')
}
}
menuBars.addEventListener('click', toggleNav);
navItems.map(item => {
item.addEventListener('click', toggleNav)
})
</script>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
:root {
--primaryColor: #fff;
--navColor1: #21292c;
--navColor2: #aa3e39;
--navColor3: #aa6e39;
--navColor4: #236267;
--navColor5: #2c8437;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
background: #000;
font-family: 'Kaushan Script', cursive;
}
/* --- Navigation Menu ------------------------------ */
.overlay {
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
background-color: rgba(0, 0, 0, .7);
transform: translateX(-100vw);
}
.overlay-slide-right {
transition: all .4s ease-in-out;
transform: translateX(0);
}
.overlay-slide-left {
transition: all .8s ease-in-out;
transform: translateX(-100vw);
}
nav,
nav ul {
height: 100vh;
margin: 0;
padding: 0;
}
nav ul li {
height: 20%;
overflow: hidden;
}
nav ul li a {
position: relative;
top: 45%;
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
display: block;
text-align: center;
transition: .3s ease-in;
}
nav ul li a:hover {
transform: scale(1.2);
}
nav ul li a::before {
content: '';
width: 25vw;
height: 3px;
background-color: #fff;
position: absolute;
top: 47.5%;
left: 0;
transition: .2s ease-out;
opacity: 0;
}
nav li a:hover::before {
opacity: 1;
}
nav ul li:nth-of-type(1) {
background-color: var(--navColor1);
}
nav ul li:nth-of-type(2) {
background-color: var(--navColor2);
}
nav ul li:nth-of-type(3) {
background-color: var(--navColor3);
}
nav ul li:nth-of-type(4) {
background-color: var(--navColor4);
}
nav ul li:nth-of-type(5) {
background-color: var(--navColor5);
}
nav ul {
display: flex;
flex-direction: column;
justify-content: stretch;
list-style: none;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-in-1 {
animation: slide-in .4s linear 0.2s both;
}
.slide-in-2 {
animation: slide-in .4s linear 0.4s both;
}
.slide-in-3 {
animation: slide-in .4s linear 0.6s both;
}
.slide-in-4 {
animation: slide-in .4s linear 0.8s both;
}
.slide-in-5 {
animation: slide-in .4s linear 1s both;
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.slide-out-1 {
animation: slide-out .3s linear 0.5s both;
}
.slide-out-2 {
animation: slide-out .3s linear 0.4s both;
}
.slide-out-3 {
animation: slide-out .3s linear 0.3s both;
}
.slide-out-4 {
animation: slide-out .3s linear 0.2s both;
}
.slide-out-5 {
animation: slide-out .3s linear .1s both;
}
/* --- Menu Bars ------------------------------------ */
.menu-bars {
position: fixed;
top: 1rem;
right: 2rem;
z-index: 10;
display: inline;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 2px;
background-color: #fff;
margin: 8px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-7px, 8px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-6px, -8px);
}
/* --- Sections ------------------------------------ */
section {
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primaryColor);
}
section#home {
background-image: url("https://images.unsplash.com/photo-1581453904507-626ddb717f14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80");
background-size: cover;
background-position: center center;
}
section#home a {
position: absolute;
z-index: 2;
top: 1.5rem;
left: 1.5rem;
text-decoration: none;
font-size: 0.8rem;
padding-bottom: 5px;
color: var(--primaryColor);
border-bottom: 1px solid var(--primaryColor);
}
section#about {
background-color: var(--navColor2);
}
section#skills {
background-color: var(--navColor3);
}
section#projects {
background-color: var(--navColor4);
}
section#contact {
background-color: var(--navColor5);
}
/* Media Query: Large Smartphone (Vertical) */
@media (max-width: 600px) {
section#home a {
top: 1rem;
left: 1rem;
}
.menu-bars {
top: 0.5rem;
right: 1rem;
}
}
