Création d'un menu de navigation coulissant avec HTML, CSS et JavaScript-tutoriel CSS-php.cn

Création d'un menu de navigation coulissant avec HTML, CSS et JavaScript

PHPz

Libérer： 2024-08-05 20:56:52

original

747 Les gens l'ont consulté

Dans la conception Web moderne, les menus de navigation sont un élément crucial qui améliore considérablement l'expérience utilisateur. Un design tendance et convivial est le menu de navigation coulissant. Dans ce blog, nous expliquerons la création d'un menu de navigation coulissant à l'aide de HTML, CSS et JavaScript. Ce tutoriel est idéal pour les développeurs Web qui cherchent à améliorer leurs sites Web avec un système de navigation élégant et fonctionnel.

Propriété de transition en CSS
La propriété de transition en CSS est utilisée pour créer des animations fluides lorsque les propriétés CSS changent d'un état à un autre. Il vous permet de spécifier quelles propriétés doivent être animées, la durée de l'animation, la fonction de timing (comment l'animation progresse) et le délai avant le démarrage de l'animation. Voici une description détaillée de la propriété de transition et de la manière dont elle est utilisée :

Syntaxe

transition: property duration timing-function delay;

Copier après la connexion

Composants

propriété : ceci spécifie la propriété CSS que vous souhaitez animer. Vous pouvez animer presque toutes les propriétés CSS, telles que la largeur, la hauteur, la couleur d'arrière-plan, l'opacité, etc. Vous pouvez également utiliser le mot-clé all pour animer toutes les propriétés pouvant faire l'objet d'une transition.
durée : Ceci définit la durée de la transition. Il est spécifié en secondes (par exemple, 1 s pour 1 seconde) ou en millisecondes (par exemple, 500 ms pour 500 millisecondes).
fonction de synchronisation : Ceci décrit comment les valeurs intermédiaires de la transition sont calculées. Les valeurs communes incluent :

linéaire : La transition est uniforme du début à la fin.
facilité : la transition démarre lentement, puis s'accélère, puis ralentit à nouveau (valeur par défaut).
facilité : la transition commence lentement.
assouplissement : la transition se termine lentement.
facilité d'entrée : la transition commence et se termine lentement.
Vous pouvez également définir des fonctions de synchronisation personnalisées à l'aide de la fonction cubique-bézier.

délai : Ceci définit combien de temps attendre avant de commencer la transition. Comme la durée, elle est spécifiée en secondes ou millisecondes. La valeur par défaut est 0s (pas de délai).

Tout d'abord, commençons par la structure HTML. Cela définira les éléments nécessaires à notre menu coulissant. (Lire la suite)
Sortie :

Creating a Slide-In Navigation Menu with HTML, CSS, and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-in Navigation Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Menu Toggle Button -->
<button onclick="toggleMenu()">Toggle Menu</button>

<!-- Navigation Menu -->
<div class="menu" id="menu">
    <a href="#" class="menu-item">Home</a>
    <a href="#" class="menu-item">About</a>
    <a href="#" class="menu-item">Services</a>
    <a href="#" class="menu-item">Contact</a>
    <a href="#" class="menu-item" onclick="closeMenu()">Close</a>
</div>

<script src="script.js"></script>
</body>
</html>

Copier après la connexion

Ensuite, ajoutons le CSS pour styliser le menu et contrôler son comportement de glissement. Créez un fichier nommé styles.css et ajoutez les styles suivants :

.menu {
    position: fixed;
    top: 0;
    left: -250px; /* Initially off-screen */
    height: 100%;
    width: 250px; /* Adjust as needed */
    background-color: #ee3646;
    transition: left 0.3s ease; /* Only transition the left property */
    z-index: 1000; /* Ensure it's above other content */
}

.menu.active {
    left: 0; /* Slide the menu into view */
}

/* Example styling for menu items */
.menu-item {
    padding: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
}

Copier après la connexion

Maintenant, ajoutons JavaScript pour gérer le comportement de glissement du menu. Créez un fichier nommé script.js et ajoutez le code suivant :

function toggleMenu() {
    const menu = document.getElementById('menu');
    menu.classList.toggle('active');
}

function closeMenu() {
    const menu = document.getElementById('menu');
    menu.classList.remove('active');
}

Copier après la connexion

Voici ce que fait le JavaScript :

toggleMenu() : Cette fonction fait basculer la classe active dans le menu, la faisant glisser dans et hors de la vue.
closeMenu() : Cette fonction supprime la classe active du menu, garantissant qu'elle glisse hors de vue lorsque vous cliquez sur le lien de fermeture.

Rassembler tout cela
Pour voir le menu de navigation coulissant en action, assurez-vous que les trois fichiers (index.html, styles.css, script.js) se trouvent dans le même répertoire et ouvrez index.html dans un navigateur Web. Cliquer sur le bouton « Basculer le menu » devrait faire glisser le menu en douceur vers la gauche. Cliquer sur le lien « Fermer » dans le menu devrait le faire glisser hors de vue.

Conclusion
La création d'un menu de navigation coulissant avec HTML, CSS et JavaScript est un processus simple qui peut améliorer considérablement l'expérience utilisateur sur votre site Web. En expérimentant différents styles, animations et fonctionnalités, vous pouvez créer une navigation unique et conviviale adaptée aux besoins de votre site Web.

Lire l'article complet - Maîtriser l'art de la propriété CSS Translate

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!