Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating an Animated Side Navbar using HTML and CSS
A Navigation Bar is a GUI element which allows the users to navigate through a website or application. It is typically a list of links at the top or side of the screen and assists users in navigating to various areas or pages within the website.
Navigation bars are implemented in operating systems, file browsers, web browsers, apps, web sites and other similar user interfaces.
In this article, we are going to design an animated side navigation bar using HTML, CSS, and JavaScript.
How to Create an Animated Side Navigation Bar
Following are the steps to design an animated side navigation bar with HTML, CSS, and JavaScript −
Step 1 − Add the following HTML code.
<body>
<div id="sidemenu">
<a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">Close</a>
<!—Side navigation bar content-->
<div class="mainNav">
<a href="#">Home</a>
<a href="#">Coding Ground</a>
<a href="#">Jobs</a>
<a href="#">Whiteboard</a>
<a href="#">Tools</a>
<a href="#">Corporate Training</a>
</div>
</div>
<div>
<span class="material-symbols-outlined" onclick="openBtn()">MENU</span>
</div>
<div class="content">
<h2>Tutorialspoint</h2>
</div>
</body>
Step 2 − Add the following CSS code.
For the animation effect, we used the CSS :hover selector and transform property.
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 0,
'opsz' 48
}
body {
background-color: #50C878;
}
#sidemenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mainNav {
margin-top: 70px;
}
.mainNav a {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 15px;
}
.content {
display: grid;
place-items: center;
height: 100vh;
}
.content h2 {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 50px;
color: white;
}
#sidemenu a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.4s;
text-align: center;
text-transform: uppercase;
}
#sidemenu a:hover {
color: black;
background: #50C878;
}
#sidemenu .btn-area {
position: absolute;
top: 0;
right: 15px;
}
span {
position: absolute;
right: 90px;
top: 30px;
font-size: 30px;
transition: 0.3s;
cursor: grab;
color: #000;
}
</style>
Step 3: Include the following script.
The code below describes the functionality of open and close buttons.
<script>
function openBtn(){
document.getElementById("sidemenu").style.width = "250px";
}
function closeBtn(){
document.getElementById("sidemenu").style.width = "0";
}
</script>
Complete Example
Now, let us combine all the above HTML, CSS, and JavaScript code blocks −
<!DOCTYPE html>
<head>
<title>Animated Sidebar Navigation</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 0,
'opsz' 48
}
body {
background-color: #50C878;
}
#sidemenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mainNav {
margin-top: 70px;
}
.mainNav a {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 15px;
}
.content {
display: grid;
place-items: center;
height: 100vh;
}
.content h2 {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 50px;
color: white;
}
#sidemenu a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.4s;
text-align: center;
text-transform: uppercase;
}
#sidemenu a:hover {
color: black;
background: #50C878;
}
#sidemenu .btn-area {
position: absolute;
top: 0;
right: 15px;
}
span {
position: absolute;
right: 90px;
top: 30px;
font-size: 30px;
transition: 0.3s;
cursor: grab;
color: #000;
}
</style>
</head>
<body>
<div id="sidemenu">
<a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">Close</a>
<div class="mainNav">
<a href="#">Home</a>
<a href="#">Coding Ground</a>
<a href="#">Jobs</a>
<a href="#">Whiteboard</a>
<a href="#">Tools</a>
<a href="#">Corporate Training</a>
</div>
</div>
<div>
<span class="material-symbols-outlined" onclick="openBtn()">MENU</span>
</div>
<div class="content">
<h2>Tutorialspoint</h2>
</div>
<script>
function openBtn(){
document.getElementById("sidemenu").style.width = "250px";
}
function closeBtn(){
document.getElementById("sidemenu").style.width = "0";
}
</script>
</body>
</html>
If we execute the above program, we can see menu symbol on top-right corner. If we click on that button, the side navigation will be opened. To close the nav bar, click on the CLOSE button on top right corner of the side nav bar.
353 Views
