Navbar-Schublade mit HTML-CSS und Javascript https://www.instagram.com/webstreet

Navbar-Schublade mit HTML-CSS und Javascript https://www.instagram.com/webstreet_code/

Barbara Streisand

Freigeben： 2024-11-19 06:56:02

Original

927 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , Anfangsskalierung=1,0">
    <title>Schublade</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <Stil>

    *{
        Rand: 0;
        Polsterung: 0;
        Boxgröße: border-box;
        Schriftfamilie: „Poppins“, serifenlos;
    }

    Körper {
            Hintergrundfarbe: #141625;
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Flex-Start;
            Höhe: 100 Vh;
            Überlauf: versteckt;
        }
        .Hamburger{
            Position: absolut;
            oben: 20px;
            links: 18px;
            Cursor: Zeiger;
            Z-Index: 10;
        }

        .hamburger .line{
            Breite: 35px;
            Höhe: 4px;
            Hintergrundfarbe: #f0a500;
            Rand:6px 0;
            Randradius: 2px;
            Übergang: alle 0,4 Sekunden erleichtern;
        }

        .menu-bar {
            Position: fest;
            oben: 0;
            links: 0;
            Breite: 80px;
            Höhe: 100 %;
            Hintergrundfarbe: #1f2235;
            Box-Shadow: 2px 0 15px rgba(0, 0, 0, 0,6);
            Überlauf: versteckt;
            Übergang: Breite 0,4 s Leichtigkeit;

        }

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

        .menu-bar ul {
            Listenstil: keiner;
            Polsterung: 80px 10px;
        }
        .menu-bar ul li {
            Anzeige: Flex;
            align-items: center;
            Polsterung: 15px;
            Farbe: #b2becd;
            Cursor: Zeiger;
            Übergang: Hintergrundfarbe 0,3 s Leichtigkeit;
            Rand links: 4 Pixel durchgehend transparent;
        }

        .menu-bar ul li i {
            Schriftgröße: 24px;
            Rand rechts: 20px;
            Übergang: Transformation 0,3 s Leichtigkeit;
        }
        .menu-bar ul li span {
            Deckkraft: 0;
            Schriftgröße: 16px;
            Übergang: Deckkraft 0,4 Sekunden;
            Leerraum: nowrap;
        }

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

        .menu-bar ul li:hover {
            Hintergrundfarbe: #282a40;
            Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:hover i {
            transformieren: Skala(1.2);
        }

        .menu-bar ul li.active {
            Hintergrundfarbe: #f0a500;
            Randradius: 20px;
            Farbe: #1f2235;
            Rand links: 4 Pixel fest #f0a500;
        }

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

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

















   </style>
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonNavbar-Schublade mit HTML-CSS und Javascript https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!