Navbar Drawer menggunakan html css dan javascript https://www.instagram.com/webstreet

Navbar Drawer menggunakan html css dan javascript https://www.instagram.com/webstreet_code/

Barbara Streisand

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

asal

935 orang telah melayarinya

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

Ikuti kami di instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , skala awal=1.0">
    <title>Laci</title>
    <pautan rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <gaya>

    *{
        margin: 0;
        padding: 0;
        saiz kotak: kotak sempadan;
        font-family: 'Poppins',sans-serif;
    }

    badan {
            warna latar belakang: #141625;
            paparan: flex;
            align-item: tengah;
            justify-content: flex-start;
            ketinggian: 100vh;
            limpahan: tersembunyi;
        }
        .hamburger{
            jawatan: mutlak;
            atas: 20px;
            kiri: 18px;
            kursor: penunjuk;
            indeks z: 10;
        }

        .hamburger .line{
            lebar: 35px;
            ketinggian: 4px;
            warna latar belakang: #f0a500;
            jidar:6px 0;
            jejari sempadan: 2px;
            peralihan: semua 0.4s mudah;
        }

        .menu-bar {
            kedudukan: tetap;
            atas: 0;
            kiri: 0;
            lebar: 80px;
            ketinggian: 100%;
            warna latar belakang: #1f2235;
            bayang-kotak: 2px 0 15px rgba(0, 0, 0, 0.6);
            limpahan: tersembunyi;
            peralihan: lebar 0.4s mudah;

        }

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

        .menu-bar ul {
            gaya senarai: tiada;
            padding: 80px 10px;
        }
        .menu-bar ul li {
            paparan: flex;
            align-item: tengah;
            padding: 15px;
            warna: #b2becd;
            kursor: penunjuk;
            peralihan: warna latar belakang 0.3s mudah;
            sempadan-kiri: 4px pepejal lutsinar;
        }

        .menu-bar ul li i {
            saiz fon: 24px;
            jidar-kanan: 20px;
            peralihan: mengubah 0.3s mudah;
        }
        .menu-bar ul li span {
            kelegapan: 0;
            saiz fon: 16px;
            peralihan: kelegapan 0.4s mudah;
            white-space: nowrap;
        }

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

        .menu-bar ul li:hover {
            warna latar belakang: #282a40;
            bayang-kotak: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

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

        .menu-bar ul li.active {
            warna latar belakang: #f0a500;
            jejari sempadan: 20px;
            warna: #1f2235;
            sempadan-kiri: 4px pepejal #f0a500;
        }

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

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

















   </style>
</head>
<badan>
    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Navbar Drawer menggunakan html css dan javascript https://www.instagram.com/webstreet_code/. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!