Article Categories

Selected Reading

Create a Hoverable Side Navigation with HTML, CSS and JavaScript

HTML Javascript Web Development Front End Technology

A navigation bar is part of a webpage that contains links to appropriate sections/pages in a website, helping users browse fast and effortlessly. The navigation bar can be implemented in many ways, but the traditional approaches are horizontal and vertical bars.

In this article, we'll design a vertical side navigation bar with hoverable buttons using HTML, CSS, and JavaScript. The navigation slides out when hovered and displays content when clicked.

Project Structure Overview

Our hoverable side navigation consists of three main components:

HTML - Structure for navigation links and content sections
CSS - Styling with hover effects and transitions
JavaScript - Function to show/hide content dynamically

HTML Structure

First, let's create the basic HTML structure with navigation links and content areas:

<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" class="content-section">
   <h2>Home Content</h2>
   <p>Welcome to the home page!</p>
</div>

<div id="codingGroundContent" class="content-section">
   <h2>Coding Ground Content</h2>
   <p>Practice coding with our online compiler.</p>
</div>

CSS Styling with Hover Effects

The CSS creates the sliding animation using the :hover selector and CSS transitions. Navigation buttons start hidden at left: -80px and slide to left: 0 on hover:

.sidenav a {
   position: absolute;
   left: -80px;
   transition: 0.3s;
   padding: 14px;
   width: 100px;
   text-decoration: none;
   font-size: 18px;
   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;
}

.content-section {
   margin: 50px auto;
   width: 60%;
   text-align: center;
   display: none;
   padding: 20px;
   background-color: #f9f9f9;
   border-radius: 8px;
}

JavaScript Function for Content Display

The JavaScript function handles showing the selected content while hiding others:

function showContent(contentId) {
   // Hide all content sections
   const allContent = document.querySelectorAll('.content-section');
   allContent.forEach(section => {
      section.style.display = 'none';
   });
   
   // Show selected content
   const selectedContent = document.getElementById(contentId);
   selectedContent.style.display = 'block';
}

Complete Working Example

Here's the complete HTML file combining all components:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Hoverable Side Navigation</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 0;
         padding: 0;
      }
      
      .sidenav a {
         position: absolute;
         left: -80px;
         transition: 0.3s;
         padding: 14px;
         width: 100px;
         text-decoration: none;
         font-size: 18px;
         color: white;
         border-radius: 0px 25px 25px 0px;
         cursor: pointer;
      }
      
      .sidenav a:hover {
         left: 0;
      }
      
      #home { top: 20px; background-color: #003300; }
      #codingground { top: 80px; background-color: #004a00; }
      #jobs { top: 140px; background-color: #006100; }
      #library { top: 200px; background-color: #007800; }
      #articles { top: 260px; background-color: #008f00; }
      #corporatetraining { top: 320px; background-color: #00ad00; }
      
      .content-section {
         margin: 50px auto;
         width: 60%;
         text-align: center;
         display: none;
         padding: 20px;
         background-color: #f9f9f9;
         border-radius: 8px;
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
   </style>
</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" class="content-section">
      <h2>Home Content</h2>
      <p>Welcome to our homepage! Here you'll find the latest updates and featured content.</p>
   </div>

   <div id="codingGroundContent" class="content-section">
      <h2>Coding Ground</h2>
      <p>Practice coding with our online compiler supporting multiple programming languages.</p>
   </div>

   <div id="jobsContent" class="content-section">
      <h2>Jobs</h2>
      <p>Explore career opportunities and find your next tech job here.</p>
   </div>

   <div id="libraryContent" class="content-section">
      <h2>Library</h2>
      <p>Access our extensive collection of programming tutorials and documentation.</p>
   </div>

   <div id="articlesContent" class="content-section">
      <h2>Articles</h2>
      <p>Read the latest technical articles and programming insights from our experts.</p>
   </div>

   <div id="corporateTrainingContent" class="content-section">
      <h2>Corporate Training</h2>
      <p>Professional training programs designed for teams and organizations.</p>
   </div>

   <script>
      function showContent(contentId) {
         // Hide all content sections
         const allContent = document.querySelectorAll('.content-section');
         allContent.forEach(section => {
            section.style.display = 'none';
         });
         
         // Show selected content
         const selectedContent = document.getElementById(contentId);
         if (selectedContent) {
            selectedContent.style.display = 'block';
         }
      }
   </script>
</body>
</html>

How It Works

The navigation works through three key mechanisms:

CSS Positioning: Navigation buttons are positioned absolutely and initially hidden off-screen
Hover Animation: The :hover selector triggers a smooth transition that slides buttons into view
Content Switching: JavaScript function hides all content sections and displays only the clicked one

Customization Options

You can easily customize this navigation by:

Changing colors in the CSS background-color properties
Adjusting transition speed by modifying the CSS transition duration
Adding icons or changing the border-radius for different shapes
Modifying the content sections with your own text and styling

Conclusion

This hoverable side navigation provides an elegant way to save screen space while maintaining easy access to different sections. The combination of CSS transitions and JavaScript content switching creates a smooth, interactive user experience perfect for modern websites.

Nikhilesh Aleti

Updated on: 2026-03-15T23:19:01+05:30

471 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next