menu caché javascript

Menu caché JavaScript

Dans cette ère numérique, les sites Web sont devenus l'un des moyens importants permettant aux gens d'obtenir des informations et de communiquer. Afin d’améliorer l’expérience utilisateur, la conception de sites Web se concentre de plus en plus sur l’interactivité et la praticité. Pour cette raison, la conception de la barre de menus est également devenue un élément important de la conception du site Web. Cependant, la barre de menus est parfois trop encombrante et occupe beaucoup d'espace sur la page, provoquant des désagréments et une oppression pour les utilisateurs. Par conséquent, l’émergence de menus cachés est devenue l’un des moyens efficaces permettant aux concepteurs de résoudre ce problème.

Le menu caché peut être masqué lorsque l'utilisateur n'en a pas besoin et développé si nécessaire. De cette manière, masquer les menus permet non seulement d'économiser de l'espace sur la page, mais permet également une meilleure classification des informations. Par conséquent, de plus en plus de sites Web ont des menus cachés. Il existe de nombreuses façons d'implémenter des menus cachés. Cet article présentera une méthode pour implémenter des menus cachés basés sur JavaScript.

1. Structure HTML

Tout d'abord, nous devons définir une barre de menu dans la page, comme indiqué ci-dessous :

<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>

Il s'agit d'une barre de menu simple avec quatre options : Accueil, Blog, Travail et Contact. Nous utiliserons JavaScript pour masquer cette barre de menu.

2. Style CSS

Avant de masquer le menu, nous devons d'abord définir le style CSS. Nous pouvons masquer l'attribut d'affichage des éléments de menu comme indiqué ci-dessous :

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;
}

Ces styles CSS sont utilisés pour styliser les éléments de menu et masquer le menu. Parmi eux, le style du menu caché est display:none, qui est la clé pour masquer le menu.

3. Implémentation de JavaScript

Maintenant, nous pouvons commencer à implémenter le menu caché via JavaScript. Nous devons ajouter un bouton à la barre de menu. Lorsque l'utilisateur clique sur ce bouton, la barre de menu disparaît. Après avoir cliqué sur le bouton, nous changerons l'état d'affichage de la barre de menu via JavaScript. Pour implémenter cette fonction, vous devez utiliser la méthode addEventListener de JavaScript pour écouter les événements de clic sur un bouton.

<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>

Dans le code à barres du menu, nous avons ajouté un élément bouton et défini son attribut id sur "menu-button". Maintenant, nous pouvons commencer à écrire du code JavaScript. Nous devons obtenir cet élément de bouton et changer l'état d'affichage de la barre de menu lorsque vous cliquez sur le bouton. Nous pouvons accomplir cette étape avec le code suivant :

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

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

Ce code JavaScript est utilisé pour obtenir l'élément bouton et l'élément barre de menu, et basculer l'état de la barre de menu lorsque vous cliquez sur le bouton. Nous utilisons la méthode classList.toggle pour changer l'attribut de classe de la barre de menus afin de masquer et d'afficher la barre de menus.

4. Ajuster le style CSS

Une fois le code terminé, nous devons ajuster le style CSS afin que l'effet du menu caché soit plus conforme aux besoins réels. Par défaut, l'état initial de la barre de menus doit être masqué et n'apparaîtra qu'après que l'utilisateur aura cliqué sur le bouton. Par conséquent, nous devons ajuster l’état par défaut de la barre de menus. Il suffit de définir la propriété d'affichage de la barre de menu sur none pour la définir à l'état caché par défaut, comme indiqué ci-dessous :

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

.hidden-menu {
    display:flex;
}

De cette façon, lorsque l'utilisateur charge la page Web, la barre de menu sera masquée par par défaut, il n'apparaîtra qu'après que l'utilisateur aura cliqué sur le bouton.

5. Effet d'implémentation

Maintenant, nous avons terminé l'implémentation du menu caché JavaScript. Examinons ensuite l'effet d'implémentation :

<!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>

Dans cet exemple, lorsque l'utilisateur charge la page Web, la barre de menu sera masquée par défaut. La barre de menu n'apparaîtra qu'après que l'utilisateur aura cliqué sur le bouton, comme indiqué ci-dessous :

Si vous cliquez à nouveau sur le bouton, la barre de menu reviendra à son état masqué.

6. Application étendue

Avec cette méthode, nous pouvons obtenir un simple effet de menu caché. Cependant, s'il y a trop d'options dans la barre de menus, le menu caché ne peut pas répondre pleinement à nos besoins. Pour le moment, nous pouvons utiliser un design réactif pour résoudre ce problème. Grâce au responsive design, nous pouvons afficher différentes barres de menus sur différents appareils. Par exemple, sur les téléphones mobiles, nous pouvons utiliser des menus déroulants pour afficher toutes les options. Cette méthode peut mieux s'adapter aux besoins des différents appareils et améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!