Home >Web Front-end >JS Tutorial >Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

Barbara StreisandOriginal: 2024-11-19 06:56:02900browse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Drawer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins',sans-serif;
    }

    body {
            background-color: #141625;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            overflow: hidden;
        }
        .hamburger{
            position: absolute;
            top: 20px;
            left: 18px;
            cursor: pointer;
            z-index: 10;
        }

        .hamburger .line{
            width: 35px;
            height: 4px;
            background-color: #f0a500;
            margin:6px 0;
            border-radius: 2px;
            transition: all 0.4s ease;
        }

        .menu-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 80px;
            height: 100%;
            background-color: #1f2235;
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            transition: width 0.4s ease;

        }

        .menu-bar.open {
            width: 220px;
        }

        .menu-bar ul {
            list-style: none;
            padding: 80px 10px;
        }
        .menu-bar ul li {
            display: flex;
            align-items: center;
            padding: 15px;
            color: #b2becd;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border-left: 4px solid transparent;
        }

        .menu-bar ul li i {
            font-size: 24px;
            margin-right: 20px;
            transition: transform 0.3s ease;
        }
        .menu-bar ul li span {
            opacity: 0;
            font-size: 16px;
            transition: opacity 0.4s ease;
            white-space: nowrap;
        }

        .menu-bar.open ul li span {
            opacity: 1;
        }

        .menu-bar ul li:hover {
            background-color: #282a40;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:hover i {
            transform: scale(1.2);
        }

        .menu-bar ul li.active {
            background-color: #f0a500;
            border-radius: 20px;
            color: #1f2235;
            border-left: 4px solid #f0a500;
        }

        .menu-bar ul li.active i {
            color: #1f2235;
        }

        .menu-bar ul li.active span {
            color: #1f2235;
        }

















   </style>
</head>
<body>
    <div>

The above is the detailed content of Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css ajax html using pointer href display position overflow margin padding border viewport background transform transition flex ul li https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How do I Redirect Users to a Different Page Using JavaScript?Next article：How do I Redirect Users to a Different Page Using JavaScript?

See more

Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

Related articles