menu tersembunyi javascript

Menu tersembunyi JavaScript

Dalam era digital ini, laman web telah menjadi salah satu cara penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Untuk meningkatkan pengalaman pengguna, reka bentuk laman web semakin memfokuskan pada interaktiviti dan praktikal. Atas sebab ini, reka bentuk bar menu juga telah menjadi bahagian penting dalam reka bentuk laman web. Walau bagaimanapun, kadangkala bar menu terlalu rumit dan memakan banyak ruang halaman, menyebabkan kesulitan dan penindasan kepada pengguna. Oleh itu, kemunculan menu tersembunyi menjadi salah satu cara yang berkesan untuk pereka untuk menyelesaikan masalah ini.

Menu tersembunyi boleh disembunyikan apabila pengguna tidak memerlukannya, dan boleh dikembangkan apabila diperlukan. Dengan cara ini, menyembunyikan menu bukan sahaja menjimatkan ruang halaman, tetapi juga membolehkan pengelasan maklumat yang lebih baik. Oleh itu, semakin banyak laman web mempunyai menu tersembunyi. Terdapat banyak cara untuk melaksanakan menu tersembunyi Artikel ini akan memperkenalkan kaedah untuk melaksanakan menu tersembunyi berdasarkan JavaScript.

1. Struktur HTML

Pertama, kita perlu mentakrifkan bar menu dalam halaman, seperti yang ditunjukkan di bawah:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Ini ialah bar menu ringkas yang mengandungi empat Pilihan : Rumah, Blog, Kerja dan Kenalan. Kami akan menggunakan JavaScript untuk menyembunyikan bar menu ini.

2. Gaya CSS

Sebelum menyembunyikan menu, kita perlu menentukan gaya CSS terlebih dahulu. Kita boleh menyembunyikan atribut paparan item menu seperti berikut:

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
}

nav ul li {
    margin:0 10px;
}

nav ul li a {
    color:#333;
    text-decoration:none;
}

.hidden-menu {
    display:none;
}

Gaya CSS ini digunakan untuk menggayakan item menu dan menyembunyikan menu. Antaranya, gaya menu tersembunyi ialah paparan:tiada, yang merupakan kunci untuk menyembunyikan menu.

3. Pelaksanaan JavaScript

Kini, kita boleh mula melaksanakan menu tersembunyi melalui JavaScript. Kita perlu menambah butang pada bar menu Apabila pengguna mengklik butang ini, bar menu akan hilang. Selepas mengklik butang, kami akan menukar keadaan paparan bar menu melalui JavaScript. Untuk melaksanakan fungsi ini, anda perlu menggunakan kaedah addEventListener JavaScript untuk mendengar peristiwa klik butang.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button id="menu-button">Menu</button>
</nav>

Dalam kod bar menu, kami menambah elemen butang dan menetapkan atribut idnya kepada "butang menu". Sekarang, kita boleh mula menulis kod JavaScript. Kita perlu mendapatkan elemen butang ini dan menukar keadaan paparan bar menu apabila butang diklik. Kita boleh melengkapkan langkah ini dengan kod berikut:

const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");

button.addEventListener("click", () => {
    menu.classList.toggle("hidden-menu");
});

Kod JavaScript ini digunakan untuk mendapatkan elemen butang dan elemen bar menu, dan togol keadaan bar menu apabila butang diklik. Kami menggunakan kaedah classList.toggle untuk menukar atribut kelas bar menu untuk menyembunyikan dan memaparkan bar menu.

4. Laraskan gaya CSS

Selepas kod selesai, kita perlu menyesuaikan gaya CSS supaya kesan menu tersembunyi lebih sesuai dengan keperluan sebenar. Secara lalai, keadaan awal bar menu harus disembunyikan dan hanya akan muncul selepas pengguna mengklik butang. Oleh itu, kita perlu melaraskan keadaan lalai bar menu. Kami hanya perlu menetapkan sifat paparan bar menu kepada tiada untuk menetapkannya untuk disembunyikan secara lalai, seperti yang ditunjukkan di bawah:

nav ul {
    display:none;
    flex-direction:row;
    justify-content:flex-end;
}

.hidden-menu {
    display:flex;
}

Dengan cara ini, apabila pengguna memuatkan halaman web, bar menu akan disembunyikan secara lalai Ia tersembunyi dan hanya akan muncul selepas pengguna mengklik butang.

5. Kesan pelaksanaan

Sekarang, kami telah menyelesaikan pelaksanaan menu tersembunyi JavaScript. Seterusnya, mari kita lihat kesan pelaksanaan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript隐藏菜单</title>
    <style>
        nav ul {
            display:none;
            flex-direction:row;
            justify-content:flex-end;
            list-style:none;
            margin:0;
            padding:0;
        }

        nav ul li {
            margin:0 10px;
        }

        nav ul li a {
            color:#333;
            text-decoration:none;
        }

        .hidden-menu {
            display:flex;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button id="menu-button">Menu</button>
    </nav>
    
    <script>
        const button = document.getElementById("menu-button");
        const menu = document.querySelector("nav ul");
        
        button.addEventListener("click", () => {
            menu.classList.toggle("hidden-menu");
        });
    </script>
</body>
</html>

Dalam contoh ini, apabila pengguna memuatkan halaman web, bar menu akan disembunyikan secara lalai. Bar menu hanya akan muncul selepas pengguna mengklik butang, seperti yang ditunjukkan di bawah:

Jika butang diklik sekali lagi, bar menu akan kembali ke keadaan tersembunyinya.

6. Aplikasi lanjutan

Melalui kaedah ini, kita boleh mencapai kesan menu tersembunyi yang mudah. Walau bagaimanapun, jika terdapat terlalu banyak pilihan dalam bar menu, menu tersembunyi tidak dapat memenuhi keperluan kami sepenuhnya Pada masa ini, kami boleh menggunakan reka bentuk responsif untuk menyelesaikan masalah ini. Melalui reka bentuk responsif, kami boleh memaparkan bar menu yang berbeza pada peranti yang berbeza Contohnya, pada telefon mudah alih, kami boleh menggunakan menu lungsur untuk memaparkan semua pilihan. Kaedah ini boleh menyesuaikan diri dengan lebih baik kepada keperluan peranti yang berbeza dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci menu tersembunyi javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!