Responsive Side Navigation Using HTML, CSS and JS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive side navigation using HTML, CSS and JS</title>

</head>

<body>

<h1 class="mainHeading">Responsive side navigation using HTML, CSS and JS</h1>
    <div class="navigationNavBar">
        <ul>
            <li><a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">Home</span>
                </a></li>
            <li><a href="#">
                    <span class="icon">
                        <ion-icon name="planet-outline"></ion-icon>
                    </span>
                    <span class="title">Blog</span>
                </a></li>
            <li><a href="#">
                    <span class="icon">
                        <ion-icon name="logo-facebook"></ion-icon>
                    </span>
                    <span class="title">facebook</span>
                </a></li>
        </ul>
        <div class="toggleAreaDiv"></div>
    </div>

</body>

</html>

CSS

.navigationNavBar {
            position: fixed;
            inset: 20px;
            background: #6c14fa;
            width: 65px;

border-radius: 50px;
            overflow: hidden;
            box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.05);
            transition: 0.5s;
        }

.navigationNavBar.active {
            width: 280px;
            border-radius: 20px;
        }

.toggleAreaDiv {
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 15px;
            right: 8px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.toggleAreaDiv::before {
            content: '';
            position: absolute;
            width: 26px;
            height: 3px;
            border-radius: 3px;
            background: #365fa1;
            transform: translateY(-5px);
            transition: 1s;
        }

.toggleAreaDiv::after {
            content: '';
            position: absolute;
            width: 26px;
            height: 3px;
            border-radius: 3px;
            background: #365fa1;
            transform: translateY(5px);
            transition: 1s;
        }

.navigationNavBar.active .toggleAreaDiv::before {
            transform: translateY(0px) rotate(-405deg);
        }

.navigationNavBar.active .toggleAreaDiv::after {
            transform: translateY(0px) rotate(225deg);
        }

.navigationNavBar ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

.navigationNavBar ul li {
            position: relative;
            list-style: none;
            width: 100%;
        }

.navigationNavBar ul li:hover {
            width: 100%;

}

.navigationNavBar ul li a {
            position: relative;
            display: block;
            width: 100%;
            color: white;
            display: flex;
            text-decoration: none;
        }

.navigationNavBar ul li a:hover {
            color: #00eeee;
        }

.navigationNavBar ul li:hover:not(:first-child) a {
            color: #00eeee;
        }

.navigationNavBar ul li a .icon {
            position: relative;
            display: block;
            min-width: 60px;
            height: 60px;
            line-height: 70px;
            text-align: center;
        }

.navigationNavBar ul li a .icon ion-icon {
            font-size: 2rem;
            margin-left: -74px;
        }

.navigationNavBar ul li a .title {
            position: relative;
            display: block;
            padding: 0 10px;
            height: 60px;
            line-height: 60px;
            text-align: start;
            white-space: nowrap;
            font-size: 1.5rem;
        }

.mainHeading {
            color: rgb(6, 2, 114);
            text-align: center;
            margin-top: 3rem;
            padding: 0 5rem;
        }

Ui Code Snippets

Responsive Side Navigation Using HTML, CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Responsive Side Navigation Using HTML, CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course