cari

Rumah >hujung hadapan web >tutorial js >Navbar Drawer menggunakan html css dan javascript https://www.instagram.com/webstreet_code/

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

Barbara Streisand
Barbara Streisandasal
2024-11-19 06:56:02900semak imbas

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>

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!

JavaScript css ajax html using pointer href display position overflow margin padding border viewport background transform transition flex ul li https
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah cara saya mengubah hala Pengguna ke Halaman Berbeza Menggunakan JavaScript?Artikel seterusnya：Bagaimanakah cara saya mengubah hala Pengguna ke Halaman Berbeza Menggunakan JavaScript?

Artikel berkaitan

Lihat lagi