Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating an Animated Side Navbar using HTML and CSS
A Navigation Bar is a GUI element which allows 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.
In this article, we will create an animated side navigation bar using HTML, CSS, and JavaScript. The sidebar will slide in from the left when opened and smoothly close when dismissed.
Syntax
#sidebar {
width: 0;
transition: width 0.5s;
}
#sidebar.open {
width: 250px;
}
Creating the Animated Side Navbar
The animated sidebar uses CSS transitions and JavaScript to control the opening and closing animations
<!DOCTYPE html>
<html>
<head>
<title>Animated Side Navbar</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #50C878;
}
#sidemenu {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#sidemenu a {
padding: 15px 20px;
text-decoration: none;
font-size: 18px;
color: #333;
display: block;
transition: 0.3s;
}
#sidemenu a:hover {
background-color: #50C878;
color: white;
}
.close-btn {
position: absolute;
top: 15px;
right: 20px;
font-size: 36px;
cursor: pointer;
}
.menu-btn {
position: absolute;
top: 20px;
left: 20px;
font-size: 30px;
cursor: pointer;
background: none;
border: none;
color: #333;
padding: 10px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
}
.content {
text-align: center;
padding-top: 150px;
}
.content h1 {
color: white;
font-size: 3em;
margin: 0;
}
</style>
</head>
<body>
<div id="sidemenu">
<span class="close-btn" onclick="closeNav()">×</span>
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Coding Ground</a>
<a href="#">Jobs</a>
<a href="#">Tools</a>
<a href="#">Corporate Training</a>
</div>
<button class="menu-btn" onclick="openNav()">? Menu</button>
<div class="content">
<h1>TutorialsPoint</h1>
<p style="color: white; font-size: 1.2em;">Click the menu button to open the animated sidebar</p>
</div>
<script>
function openNav() {
document.getElementById("sidemenu").style.width = "300px";
}
function closeNav() {
document.getElementById("sidemenu").style.width = "0";
}
</script>
</body>
</html>
A green webpage with a "Menu" button in the top-left corner and "TutorialsPoint" centered. Clicking the Menu button slides in a white sidebar from the left with navigation links. The sidebar can be closed by clicking the × button in its top-right corner.
Key Features
Smooth Animation The
transition: 0.5sproperty creates a smooth sliding effect when opening/closingHover Effects Navigation links change background color when hovered
Fixed Positioning The sidebar stays in place while the page scrolls
Responsive Design Uses viewport units and flexible sizing
Conclusion
This animated side navigation bar provides a clean, modern way to display navigation links. The CSS transition property creates smooth animations while JavaScript controls the opening and closing functionality. You can customize the colors, fonts, and animation duration to match your website's design.
795 Views
