"Side Menu - Hemburger Navigation / Ravi_Singh"
Bootstrap 4.1.1 Snippet by ravi7284007

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments: