Current Location：How HTML > HTML Articles > Content

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Creating a hoverable side navigation can significantly enhance the user experience on a website. It allows users to easily navigate through different sections of the site without cluttering the main content area. In this article, we will guide you through the process of creating a hoverable side navigation using HTML, CSS, and JavaScript. We will provide detailed examples with complete code snippets that you can directly use and modify according to your needs.

Introduction

A hoverable side navigation is a navigation menu that expands or shows more options when the user hovers over it. This type of navigation is particularly useful for websites with multiple levels of content hierarchy, allowing users to quickly access different sections without excessive clicking.

HTML Structure

The first step in creating a hoverable side navigation is to define its HTML structure. This involves creating a container for the navigation and adding menu items within it.

Example 1: Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation - how2html.com</title>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

Output:

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

CSS Styling

After defining the HTML structure, the next step is to style the side navigation using CSS. This includes setting the width, height, background color, and other visual styles for the navigation and its items.

Example 2: Basic CSS Styling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation - how2html.com</title>
    <style>
        .sidenav {
            height: 100%;
            width: 60px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 20px;
        }

        .sidenav a {
            padding: 10px 8px 10px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

JavaScript Functionality

To make the side navigation hoverable, we need to add JavaScript. This will allow us to change the width of the navigation menu when the user hovers over it.

Example 3: Basic JavaScript Functionality

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation - how2html.com</title>
    <style>
        /* CSS styles from Example 2 */
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>

    <script>
        document.getElementById('mySidenav').addEventListener('mouseover', function() {
            this.style.width = '250px';
        });

        document.getElementById('mySidenav').addEventListener('mouseout', function() {
            this.style.width = '60px';
        });
    </script>
</body>
</html>

Output:

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Enhancing the Navigation

To further enhance the hoverable side navigation, we can add icons to the menu items, implement sub-menus, and add animations for a smoother user experience.

Example 4: Adding Icons to Menu Items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation with Icons - how2html.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        /* CSS styles from Example 2 */
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home"><i class="fas fa-home"></i> Home</a>
        <a href="#about"><i class="fas fa-user"></i> About</a>
        <a href="#services"><i class="fas fa-briefcase"></i> Services</a>
        <a href="#contact"><i class="fas fa-envelope"></i> Contact</a>
    </div>
</body>
</html>

Output:

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Example 5: Implementing Sub-Menus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation with Sub-Menus - how2html.com</title>
    <style>
        /* CSS styles from Example 2, with additional styles for sub-menus */
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <div class="sub-menu">
            <a href="#services">Services</a>
            <a href="#service1">Service 1</a>
            <a href="#service2">Service 2</a>
        </div>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

Output:

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Example 6: Adding Animations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hoverable Side Navigation with Animations - how2html.com</title>
    <style>
        /* CSS styles from Example 2, with additional styles for animations */
    </style>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

Output:

Create a Hoverable Side Navigation with HTML, CSS, and JavaScript

Conclusion

Creating a hoverable side navigation requires a combination of HTML, CSS, and JavaScript. By following the examples provided in this article, you can create a functional and visually appealing side navigation for your website. Remember to customize the code snippets according to your website’s theme and requirements.

Like(0)

HTML Articles