Elastic Animation Navigation Menu Bar in HTML and CSS
Are you looking for a professional horizontal navigation bar with an animated effect? The Elastic Animation Navigation Menu Bar in HTML, CSS is perfect, thank you very much! What I am going to do for you is to give you the source codes so that you will be able to include a responsive, elegant navigation bar in your project.
This above menu bar differs from others due to the flexibility and gradual animation. As a personal website or a professional project, this navigation bar increases usability and creativity to your site.
GitHub Source: Elastic Animation Navigation Menu
Features
- Easy to use and well-commented code: It consists of basic code and has some comments for changing its settings if necessary.
- Compatible with all modern CMS: It can be integrated seamlessly with WordPress, Joomla and any other custom HTML based websites.
- Clean and organized: The source code is also clean and as such developers can integrate it with their projects with ease.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Video Tutorial
Steps to Build Menu
General steps of constructing Your Own Elastic Animation Navigation Menu Bar are not difficult. Follow these steps to integrate it into your project:
- Create Project Folder: Begin by creating a project directory on your local host machine.
- Create index.html: Create an index.html file into your project root folder.
- Create style.css: Create a style.css file needed to provide the correct styles for the navigation menu.
- Copy and paste the Code: After you have made these files, you should then copy and paste the following source codes into the files respectively.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!--
JV Codes | www.jvcodes.com
Elastic Tab Animation with Icons
-->
<html lang="en" dir="ltr">
<head>
<!-- Meta tags for character encoding and viewport settings -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the webpage -->
<title>Elastic Tab Animation | JV Codes</title>
<!-- Link to external CSS file for styling -->
<link rel="stylesheet" href="styles.css">
<!-- Link to Font Awesome icons for the menu items -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<!-- Wrapper for navigation bar content -->
<div class="wrapper">
<!-- Navigation bar with radio buttons for tab functionality -->
<nav>
<!-- Home tab (default selected) -->
<input type="radio" name="tab" id="home" checked>
<!-- Inbox tab -->
<input type="radio" name="tab" id="inbox">
<!-- Contact tab -->
<input type="radio" name="tab" id="contact">
<!-- Heart tab -->
<input type="radio" name="tab" id="heart">
<!-- About tab -->
<input type="radio" name="tab" id="about">
<!-- Labels with icons and links for each tab -->
<label for="home" class="home">
<a href="#"><i class="fas fa-home"></i>Home</a>
</label>
<label for="inbox" class="inbox">
<a href="#"><i class="far fa-comment"></i>Inbox</a>
</label>
<label for="contact" class="contact">
<a href="#"><i class="far fa-envelope"></i>Contact</a>
</label>
<label for="heart" class="heart">
<a href="#"><i class="far fa-heart"></i>Heart</a>
</label>
<label for="about" class="about">
<a href="#"><i class="far fa-user"></i>About</a>
</label>
<!-- Tab indicator for the elastic animation -->
<div class="tab"></div>
</nav>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the menu:
/*
JV Codes | www.jvcodes.com
Elastic Tab Animation with Icons - Stylesheet
*/
/* Importing Google Fonts (Poppins) for text styling */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* Global reset to remove default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif; /* Applying Poppins font to the entire document */
}
/* Setting up grid layout for full-page centering of content */
html, body {
display: grid;
height: 100%;
place-items: center; /* Centers items horizontally and vertically */
text-align: center;
background: #f2f2f2; /* Light gray background color */
}
/* Wrapper for navigation menu */
.wrapper {
height: 60px;
width: 55vw; /* Responsive width: 55% of the viewport width */
background: #fff; /* White background */
line-height: 60px; /* Vertically centering text within the wrapper */
border-radius: 50px; /* Rounded corners */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); /* Soft shadow for a 3D effect */
}
/* Navigation inside wrapper */
.wrapper nav {
position: relative;
display: flex; /* Flexbox to position items in a row */
}
/* Labels for each navigation tab */
.wrapper nav label {
flex: 1; /* Each label takes equal width */
width: 100%;
z-index: 1; /* Ensure labels appear above other elements */
cursor: pointer; /* Cursor changes to pointer on hover */
}
/* Anchor tags within labels */
.wrapper nav label a {
position: relative;
z-index: -1; /* Ensures the background animation appears underneath */
color: #1d1f20; /* Default text color */
font-size: 20px;
font-weight: 500;
text-decoration: none; /* Removes underline from links */
transition: color 0.6s ease; /* Smooth transition for color change on tab selection */
}
/* Changes the color of the selected tab */
.wrapper nav #home:checked ~ label.home a,
.wrapper nav #inbox:checked ~ label.inbox a,
.wrapper nav #contact:checked ~ label.contact a,
.wrapper nav #heart:checked ~ label.heart a,
.wrapper nav #about:checked ~ label.about a {
color: #fff; /* White color for the selected tab */
}
/* Icons inside the labels */
.wrapper nav label a i {
font-size: 25px; /* Icon size */
margin: 0 7px; /* Spacing between icon and text */
}
/* Elastic animated tab background */
.wrapper nav .tab {
position: absolute;
height: 100%;
width: 20%; /* The tab occupies 20% of the wrapper width */
left: 0; /* Starts at the first tab */
bottom: 0;
z-index: 0; /* Places the tab behind the labels */
border-radius: 50px; /* Rounded edges for the tab */
background: linear-gradient(45deg, #e90000 0%, #fa8e00 100%); /* Gradient color for the tab */
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Elastic-like animation effect */
}
/* Positioning the tab when each radio input is selected */
.wrapper nav #inbox:checked ~ .tab {
left: 20%; /* Moves the tab to the second position */
}
.wrapper nav #contact:checked ~ .tab {
left: 40%; /* Moves the tab to the third position */
}
.wrapper nav #heart:checked ~ .tab {
left: 60%; /* Moves the tab to the fourth position */
}
.wrapper nav #about:checked ~ .tab {
left: 80%; /* Moves the tab to the last position */
}
/* Hide the radio input buttons */
.wrapper nav input {
display: none;
}
Download Source Code
You can download the complete source codes for the Elastic Animation Navigation Menu Bar from the button below. Everything has been put in this package including the files and even the styles therefore do not worry. There is no copyright, so you may use it in any of your projects.
Conclusion
You are welcome to free use of the Elastic Animation Navigation Menu Bar and enhance navigating and interactivity of your websites. As important, be sure to reference JV Source Codes by linking the site back here because that is the best way to help our site grow through backlinks.
If you have any difficulties, don’t hesitate to make your comment below, I would really like to help you. Plus, make sure to subscribe to my channel for future tutorials as well as free code.
