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
Create a Hoverable Side Navigation with HTML, CSS and JavaScript
A navigation bar is part of a webpage where it contains links to appropriate sections/ pages in a website that helps users in browsing the website fast and effortlessly. The navigation bar can be implemented in many ways, but the traditional way of implementing is horizontal and vertical bars.
In this article, we are going to design a vertical side navigation bar using HTML, CSS, and JavaScript.
Creating a Hoverable Side Navigation
Following are the steps to design hoverable side navigation buttons with HTML, CSS, and JavaScript −
Step 1 − Add the following HTML code.
<body>
<div class="sidenav">
<a href="#" id="home" onclick="showContent('homeContent')">Home</a>
<a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a>
<a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a>
<a href="#" id="library" onclick="showContent('libraryContent')">Library</a>
<a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a>
<a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a>
</div>
<div id="homeContent" style="display: none;">
<h2>Home Content</h2>
<p>This is the content for the Home page.</p>
</div>
<div id="codingGroundContent" style="display: none;">
<h2>Coding Ground Content</h2>
<p>This is the content for the Coding Ground page.</p>
</div>
<div id="jobsContent" style="display: none;">
<h2>Jobs Content</h2>
<p>This is the content for the Jobs page.</p>
</div>
<div id="libraryContent" style="display: none;">
<h2>Library Content</h2>
<p>This is the content for the Library page.</p>
</div>
<div id="articlesContent" style="display: none;">
<h2>Articles Content</h2>
<p>This is the content for the Articles page.</p>
</div>
<div id="corporateTrainingContent" style="display: none;">
<h2>Corporate Training Content</h2>
<p>This is the content for the Corporate Training page.</p>
</div>
</body>
Step 2 − Add the following CSS code.
For the hovering effect, we used the CSS :hover selector. Whenever we hover the mouse an element, the :hover selector will select it.
<style>
.sidenav a {
position: absolute;
left: -80px;
transition: 0.1s;
padding: 14px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0px 25px 25px 0px;
}
.sidenav a:hover {
left: 0;
}
#home {
top: 20px;
background-color: #003300;
}
#codingground {
top: 80px;
background-color: #004a00;
}
#jobs {
top: 165px;
background-color: #006100;
}
#library {
top: 225px;
background-color: #007800;
}
#articles {
top: 285px;
background-color: #008f00;
}
#corporatetraining {
top: 345px;
background-color: #00ad00;
}
#homeContent, #codingGroundContent, #jobsContent, #libraryContent, #articlesContent, #corporateTrainingContent{
margin: auto;
display: flex;
width: 60%;
text-align: center;
display: none;
}
</style>
Step 3 − Include the following script.
<script>
function showContent(contentId) {
var content = document.getElementById(contentId);
content.style.display = "block";
}
</script>
Complete Example
Now, let us combine all the above HTML, CSS, and JavaScript code blocks −
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Side Navigation with HTML, CSS and JavaScript</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.sidenav a {
position: absolute;
left: -80px;
transition: 0.1s;
padding: 14px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0px 25px 25px 0px;
}
.sidenav a:hover {
left: 0;
}
#home {
top: 20px;
background-color: #003300;
}
#codingground {
top: 80px;
background-color: #004a00;
}
#jobs {
top: 165px;
background-color: #006100;
}
#library {
top: 225px;
background-color: #007800;
}
#articles {
top: 285px;
background-color: #008f00;
}
#corporatetraining {
top: 345px;
background-color: #00ad00;
}
#homeContent,
#codingGroundContent,
#jobsContent,
#libraryContent,
#articlesContent,
#corporateTrainingContent {
margin: auto;
display: flex;
width: 60%;
text-align: center;
display: none;
}
</style>
<script>
function showContent(contentId) {
var content = document.getElementById(contentId);
content.style.display = "block";
}
</script>
</head>
<body>
<div class="sidenav">
<a href="#" id="home" onclick="showContent('homeContent')">Home</a>
<a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a>
<a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a>
<a href="#" id="library" onclick="showContent('libraryContent')">Library</a>
<a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a>
<a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a>
</div>
<div id="homeContent">
<h2>Home Content</h2>
<p>This is the content for the Home page.</p>
</div>
<div id="codingGroundContent">
<h2>Coding Ground Content</h2>
<p>This is the content for the Coding Ground page.</p>
</div>
<div id="jobsContent">
<h2>Jobs Content</h2>
<p>This is the content for the Jobs page.</p>
</div>
<div id="libraryContent">
<h2>Library Content</h2>
<p>This is the content for the Library page.</p>
</div>
<div id="articlesContent">
<h2>Articles Content</h2>
<p>This is the content for the Articles page.</p>
</div>
<div id="corporateTrainingContent">
<h2>Corporate Training Content</h2>
<p>This is the content for the Corporate Training page.</p>
</div>
</body>
</html>
After executing the above program, we can see there are six buttons on the left corner of the screen. If we hover on any button, it shows the transition. If we try to click on it, it will display the associated content on the screen.
Updated on: 29-Aug-2023
127 Views
Advertisements