Maison >interface Web >js tutoriel >Création d'une barre de navigation réactive avec HTML, CSS et JavaScript
Dans le paysage actuel du développement Web, la création d'une barre de navigation réactive et conviviale est essentielle. Cet article décrit le processus de conception d'une barre de navigation réactive utilisant HTML, CSS et JavaScript.
Aperçu
Le code fourni montre comment créer une barre de navigation qui s'adapte à différentes tailles d'écran. La barre de navigation comprend une navigation supérieure standard pour les écrans plus grands et un menu de navigation latéral qui glisse depuis la gauche pour les écrans plus petits. Cette approche garantit une expérience utilisateur transparente sur différents appareils.
Structure HTML
Le HTML fournit une structure de base pour la page Web. Il comprend :
Un élément contenant le titre du site Web et un bouton bascule pour la navigation latérale.
Deux éléments : un pour la navigation d'en-tête et un autre pour la navigation latérale.
Une section pour le contenu principal de la page.
Le bouton bascule (☰) est utilisé pour ouvrir et fermer le menu de navigation latéral sur des écrans plus petits.
<header> <h1>My Website</h1> <button id="toggle-btn">☰</button> <nav id="header-nav"> <!-- Navigation menu will be inserted here --> </nav> </header> <nav id="side-nav"> <!-- Navigation menu will be inserted here --> </nav> <main> <h2>Welcome to My Website</h2> <p>This is the content of the page.</p> </main>
Style CSS
Les styles CSS définissent l'apparence et le comportement des éléments de navigation :
nav#side-nav { background: #191d2b; width: 250px; height: 100vh; position: relative; top: 0; left: -250px; transform: translateX(0); transition: all .4s ease-out; z-index: 10; } nav#side-nav.active { left: 0; } @media (max-width: 768px) { header nav#header-nav { display: none; } header #toggle-btn { display: block; } } @media (min-width: 769px) { nav#side-nav { display: none; } }
Fonctionnalité JavaScript
JavaScript est utilisé pour insérer dynamiquement le menu de navigation dans les sections de navigation d'en-tête et latérales. Le script gère également la fonctionnalité du bouton bascule, permettant aux utilisateurs d'afficher ou de masquer le menu de navigation latéral.
const navMenu = ` <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> `; document.getElementById('header-nav').innerHTML = navMenu; document.getElementById('side-nav').innerHTML = navMenu; document.getElementById('toggle-btn').onclick = function() { let sideNav = document.getElementById('side-nav'); sideNav.classList.toggle('active'); };
Démo en direct
Vous pouvez voir une démo en direct de la barre de navigation réactive en action ici : Voir la démo en direct.
Référentiel GitHub
Pour le code source complet, y compris les fichiers HTML, CSS et JavaScript, visitez le référentiel GitHub : Responsive Navigation Bar.
Conclusion
Cette approche de création d'une barre de navigation réactive fournit une solution robuste pour la conception Web moderne. En tirant parti du HTML pour la structure, du CSS pour le style et du JavaScript pour l'interactivité, les développeurs peuvent garantir une expérience de navigation fluide et adaptative aux utilisateurs sur n'importe quel appareil. Ce code peut servir de base à des systèmes de navigation plus complexes, s'adaptant aux besoins de divers projets.
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!