Bina menu navigasi responsif: Flexbox mengimplementasikan susun atur elegan ikon hamburger dan item menu

Tutorial ini menerangkan cara menggunakan susun atur Flexbox dan sedikit JavaScript untuk menyelesaikan masalah ikon hamburger yang bertindih dan item menu dalam menu navigasi responsif. Dengan mengoptimumkan struktur HTML, susun atur fleksibel dengan Flexbox, dan logik penukaran menu mudah, kami memastikan bahawa menu navigasi dapat dipaparkan dengan anggun di bawah saiz skrin yang berbeza, mencapai susunan item menu yang betul di bawah ikon hamburger.

1. Pengenalan: Cabaran Menu Navigasi Responsif

Menu navigasi responsif adalah sebahagian daripada reka bentuk web moden. Ia membolehkan laman web menyediakan pengalaman pengguna yang konsisten di desktop, tablet dan peranti mudah alih. Walau bagaimanapun, apabila lebar skrin dikurangkan, pautan navigasi tradisional ditukar menjadi ikon hamburger yang boleh diklik dan meluaskan item menu di bawahnya, kesukaran susun atur sering ditemui, seperti item menu yang bertindih dengan ikon hamburger. Ini biasanya disebabkan oleh kedudukan yang tidak sesuai, terapung, atau menetapkan konteks (Z-indeks). Tutorial ini akan menyediakan penyelesaian yang mantap dan mudah untuk dikendalikan dengan memperkenalkan susun atur Flexbox dan struktur HTML/CSS yang dioptimumkan, digabungkan dengan logik JavaScript yang mudah.

2. Analisis Masalah Teras dan Gambaran Keseluruhan Penyelesaian

Masalah awal ialah apabila saiz skrin kurang daripada 640px, item menu (seperti "kira -kira", "kerja", "resume") tidak dipaparkan dengan betul di bawah ikon hamburger, tetapi bertindih dengannya. Ini biasanya disebabkan oleh sebab -sebab berikut:

• Dalam mod responsif, kedua -dua item dan ikon menu boleh menggunakan kedudukan: mutlak atau terapung, menyebabkan mereka dipisahkan dari aliran dokumen dan kekurangan hubungan susun atur yang jelas antara satu sama lain.
• Penetapan indeks Z yang tidak betul boleh menyebabkan unsur-unsur yang membingungkan susunan susunan.
• Atribut paparan lalai gagal mengawal paparan dan menyembunyikan elemen dengan berkesan di bawah skrin kecil.

Penyelesaian kami akan berputar di sekitar titik teras berikut:

1. Pengoptimuman Struktur HTML: Pastikan ikon hamburger dan item menu secara logiknya tergolong dalam bekas induk yang sama untuk pengurusan susun atur bersatu.
2. Susun atur Flexbox: Ambil kesempatan daripada kuasa Flexbox untuk mengawal arah pengaturan dan penjajaran unsur -unsur di bawah saiz skrin yang berbeza.
3. Interaksi JavaScript: Gunakan fungsi JavaScript yang mudah untuk menukar keadaan paparan menu dan perubahan susun atur pemacu dengan menambahkan/mengeluarkan kelas CSS.
4. Butiran CSS Pelarasan: Keluarkan lebar: 100% yang boleh menyebabkan masalah susun atur dan gunakan kiri: 0; Kanan: 0; untuk memastikan lebar skrin penuh semasa menyelaraskan sifat terapung yang tidak perlu.

3. Pengoptimuman Struktur HTML

Untuk lebih baik menggunakan Flexbox untuk susun atur, kita perlu menyesuaikan struktur HTML dan letakkan ikon hamburger dan item menu dalam kontena div.menu yang sama. Dengan cara ini, Flexbox dapat menguruskan pengaturan mereka secara seragam.

 


    <meta charset="utf-8">
    <meta http-equiv="x-ua-compisan" content="ie = edge">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> Menu Navigasi Responsif 
    <link rel="stylesheet" type="text/css" href="./%20index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <script>
        // fungsi javascript digunakan untuk menukar status paparan fungsi menu togglemenu (localThis) {
            // Tukar kelas &#39;terbuka&#39; elemen induk localthis.parentnode.parentnode.classlist.toggle (&#39;buka&#39;);
        }
    </script>


    <div class="header_nav">
        <div class="logo">
            <a href="index.html">
                
                <svg width="50" ketinggian="20">
                    <rect width="50" height="20" style="Fill: rgb (0,0,255); stroke-width: 3; stroke: rgb (0,0,0)"></rect>
                </svg>
            </a>
        </div>

        <div class="menu" id="myMenunav">
            
            <div class="hamburger-toggle" style="paparan: none;">
                <a href="JavaScript:%20void%20(0);" onclick="togglemenu (this)">
                    <i class="fa-solid fa-burger"> </i>
                </a>
            </div>
            <ul>
                <li> <a href="about.html"> tentang </a> </li>
                <li> <a href="index.html#work"> work </a> </li>
                <li> <a href="resume.pdf" target="_ blank"> resume </a> </li>
            </ul>
        </div>
    </div>

</tirly>

Perubahan utama:

• Ikon hamburger dibalut dengan div.hamburger-toggle dan diletakkan di dalam div.Menu dengan senarai UL.
• Acara OnClick memanggil togglemenu (ini), lulus elemen klik semasa sebagai parameter, supaya JavaScript dapat mencari elemen induk yang betul.

4. Maklumat Layout CSS: Aplikasi Flexbox

Flexbox adalah alat yang berkuasa untuk membina susun atur responsif. Kami akan menggunakannya untuk mengawal susun atur utama bar navigasi dan bagaimana menu hamburger berkembang di bawah skrin kecil.

 /* ----------------------------------------------------------------------------------------------------------------------
badan {
    Margin: 0; /* Keluarkan margin lalai badan*/
}

.header_nav {
    Padding: 15px; /* margin bar navigasi atas*/
    Paparan: Flex; /* Membolehkan susun atur flexbox*/
    Justify-Content: Space-antara; /* Kedua -dua hujung elemen kanak -kanak (logo dan menu) diselaraskan*/
    latar belakang warna: #fffef9f7;
    Ketinggian: 75px;
    Kedudukan: Tetap;
    Atas: 0;
    Kiri: 0; /* Pastikan untuk menduduki keseluruhan lebar*/
    Kanan: 0; /* Pastikan untuk menduduki keseluruhan lebar*/
    Z-indeks: 1;
}

.header_nav ul,
.header_nav a {
    Senarai gaya: Tiada;
    paparan: blok sebaris; /* Simpan blok sebaris pautan dan item senarai yang dipaparkan*/
    Teks-penyerapan: Tiada;
    Font-Weight: 600;
    saiz font: 28px;
    Teks-transformasi: huruf besar;
}

.header_nav a: hover {
    Warna: #78F51D;
}

.logo {
    Padding: 0px; /* Keluarkan margin lalai*/
    Paparan: Flex; /* Pastikan unsur -unsur dalaman logo (seperti gambar) juga boleh ditekuk*/
    Align-items: Center; / * logo pusat menegak */
}

.logo img {
    Max-Height: 45px;
}

.menu {
    Padding: 0px; /* Keluarkan margin lalai*/
    /* terapung: unset; *//*Keluarkan float, diuruskan oleh flexbox*/
    Paparan: Flex; /* Membolehkan susun atur flexbox*/
    Align-items: Center; /* Pada skrin besar, item menu berpusat secara menegak*/
}

.menu ul {
    Margin: 0px! Penting; /* Keluarkan margin lalai UL*/
    Padding: 0px! Penting; /* Keluarkan margin lalai UL*/
    Senarai-jenis jenis: Tiada! Penting; /* Keluarkan gaya senarai*/
    Paparan: Flex; /* Item menu diatur secara mendatar*/
}

.menu ul li {
    padding-left: 20px; /* Jarak antara item menu*/
}

/* ----------------------------------------------------------------------------------------------------------------------
@media sahaja skrin dan (maksimum lebar: 640px) {
    .menu {
        Paparan: Flex;
        flex-arah: lajur; /* Di bawah skrin kecil, item menu disusun secara menegak*/
        Align-items: flex-end; /* Item menu adalah sejajar*/
    }

    .hamburger-toggle {
        Paparan: Flex! Penting; /* Ikon hamburger dipaparkan di bawah skrin kecil*/
        Align-diri: flex-end; /* Ikon hamburger adalah sejajar dengan betul*/
    }

    .menu ul {
        Paparan: Tiada! Penting; /* Item menu tersembunyi lalai*/
        flex-arah: lajur; /* Item menu timbunan secara menegak selepas pengembangan*/
        Align-items: flex-end; /* Item menu adalah sesuai selepas pengembangan*/
    }

    .menu ul li {
        padding-top: 20px; /* Jarak menegak antara item menu selepas pengembangan*/
    }

    /* Item menu dipaparkan apabila elemen .Menu mengandungi kelas 'terbuka'*/
    .menu.open ul {
        Paparan: Flex! Penting;
    }
}

Penjelasan CSS utama:

• .header_nav:
  • Paparan: Flex; Menjadikannya bekas flex.
  • Justify-Content: Space-antara; Tekan logo dan menu ke kedua -dua hujung masing -masing.
  • Kiri: 0; Kanan: 0; Bersempena dengan kedudukan: Tetap memastikan bahawa bar navigasi menduduki seluruh lebar viewport dan tidak akan melimpah walaupun padding ditetapkan.
• .menu:
  • Di bawah skrin besar, paparan: flex; Align-items: Center; Pusat senarai UL dalamannya secara menegak.
  • Di bawah skrin kecil (@media sahaja skrin dan (maksimum lebar: 640px)):
    • flex-arah: lajur; Buat Hamburger-Toggle dan UL Vertically Stack.
    • Align-items: flex-end; Selaraskan mereka semua ke kanan.
• .hamburger-toggle:
  • Paparan: Tiada; Sembunyikan secara lalai.
  • Di bawah skrin kecil, paparan: flex! Penting; Memaparkan paparan ikon hamburger. Align-diri: flex-end; Pastikan ia juga betul apabila disusun secara menegak.
• .menu ul:
  • Di bawah skrin besar, paparan: flex; mengatur item menu secara mendatar.
  • Di bawah skrin kecil, paparan: tiada! Penting; menyembunyikan item menu secara lalai.
  • Apabila div.Menu mempunyai kelas terbuka (bertukar melalui JavaScript), .menu.Open UL dipaksa dipaparkan: flex! Penting; dan arah flex: lajur; Membuat item menu timbunan secara menegak.
• Penggunaan! Dalam projek-projek sebenar, ia harus dielakkan dengan pemilih yang lebih spesifik sebanyak mungkin, tetapi ia boleh menjadi alat praktikal apabila prototaip dengan cepat atau menimpa gaya pihak ketiga.

5. Logik interaktif JavaScript

Tujuan JavaScript adalah untuk mendengar peristiwa klik ikon hamburger dan bertukar -tukar kelas CSS (.open) pada elemen .menu mengikut status klik. Kelas ini akan bertindak sebagai pencetus untuk pertanyaan media CSS, mengawal paparan dan menyembunyikan item menu.

 // fungsi togglemenu (localThis) {in <script> diletakkan di <head> tag
    // localThis adalah diklik <a> tag // localthis.parentnode adalah .hamburger-toggle div
    // localthis.parentnode.parentnode adalah .menu div
    // kita perlu menukar kelas &#39;terbuka&#39; localthis.parentnode.parentnode.classlist.toggle (&#39;buka&#39;);
}</script>

Jelaskan:

• Fungsi togglemenu (localthis) menerima elemen yang diklik sebagai parameter.
• Dapatkan elemen .Menu melalui localthis.parentnode.parentnode.
• Kaedah classlist.toggle ('buka') memeriksa sama ada elemen .menu mengandungi kelas terbuka: keluarkan jika ia wujud, dan tambahkan jika ia tidak wujud.
• Apabila kelas terbuka ditambahkan ke .menu, peraturan CSS .Menu.Open Ul {Display: Flex! Penting; } berkuatkuasa, memaparkan item menu.

6. Langkah berjaga -jaga dan amalan terbaik

• Kelebihan Flexbox: Flexbox menyediakan keupayaan penjajaran dan pengedaran yang kuat, menjadikannya sesuai untuk membina navigasi responsif. Lebih mudah difahami dan dikekalkan daripada terapung dan kedudukan tradisional.
• HTML Semantik: Memelihara Semantik Struktur HTML membantu meningkatkan kebolehcapaian dan pengoptimuman enjin carian.
• Kebolehcapaian: Pertimbangkan untuk menambah sifat-sifat ARIA yang berkembang dan Aria-Controls ke ikon hamburger untuk meningkatkan pengalaman untuk pengguna pembaca skrin.
• Peningkatan Progresif: Pastikan sekurang -kurangnya navigasi asas (contohnya, navigasi desktop) boleh dipaparkan apabila JavaScript tidak tersedia.
• Kod ini kemas: Elakkan terlalu banyak! Penting. Walaupun digunakan dalam kes ini untuk mengatasi gaya lalai dan memastikan tingkah laku responsif, pemilih yang lebih spesifik harus disukai dalam projek besar.
• Keserasian pelayar: Penyemak imbas moden Flexbox menyokong dengan baik, tetapi untuk pelayar yang lebih tua, anda mungkin perlu menambah awalan atau menyediakan alternatif.

7. Ringkasan

Melalui tutorial ini, kami belajar bagaimana untuk membina menu navigasi responsif yang berfungsi sepenuhnya dan indah menggunakan susun atur Flexbox, struktur HTML yang dioptimumkan dan logik JavaScript ringkas. Kuncinya adalah untuk mengatur ikon hamburger dan menu item yang munasabah dalam bekas Flex yang sama dan secara dinamik menukar susun atur dan status paparan mereka melalui pertanyaan media dan JavaScript. Pendekatan ini bukan sahaja menyelesaikan masalah item menu yang bertindih, tetapi juga menyediakan penyelesaian navigasi responsif yang fleksibel dan mudah untuk dikekalkan.

Atas ialah kandungan terperinci Bina menu navigasi responsif: Flexbox mengimplementasikan susun atur elegan ikon hamburger dan item menu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!