Créer une barre de navigation fonctionnelle et moderne peut être complexe sans une bonne approche.
Sans une structure claire et un design attractif, l’expérience utilisateur peut être compromise, rendant difficile l’accès aux sections clés.
Cet article vous guide à travers les étapes pour concevoir une barre de navigation esthétique et intuitive avec HTML, CSS et PHP.
Réalisez votre projet web de A à Z sous PHP 8
Bases de la barre de navigation HTML CSS
Cette section consiste à créer une structure de navigation simple et fonctionnelle pour permettre aux administrateurs d’accéder facilement aux différentes sections de l’interface de gestion.
Étapes principales :
- Créer la structure HTML de la barre de navigation :Vous devez concevoir une barre de navigation avec des liens vers les pages clés de la zone admin, comme la gestion des biens, des transactions, des utilisateurs, etc.
- Appliquer du style avec CSS :Pour rendre la barre de navigation plus attrayante et intuitive, vous utiliserez du CSS pour styliser les éléments et améliorer l’ergonomie.
- Rendre la barre de navigation dynamique :Intégrer des éléments PHP pour que la barre de navigation s’adapte en fonction des privilèges de l’utilisateur (admin ou utilisateur standard) et afficher des options spécifiques selon son rôle.
Pour mettre en place cette barre de navigation, vous allez créer un fichier _nav.php
Code PHP
<nav>
<ul>
<li><a href="index.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Accueil</a></li>
<li><a href="bien-insert.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Ajouter un bien</a></li>
<li><a href="../session-out.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Déconnexion</a></li>
</ul>
</nav>
Explication de code :
- <nav> :Il s’agit de l’élément HTML qui définit une section de navigation sur la page. Cela indique aux navigateurs que le contenu à l’intérieur fait partie de la navigation du site.
- <ul> :Cet élément crée une liste non ordonnée, qui sera utilisée pour organiser les liens de navigation.
- <li> :Chaque élément de cette liste (li) contient un lien de navigation.
- <a href= »index.php »>Accueil</a> :Ce lien redirige l’utilisateur vers la page d’accueil du site lorsqu’il clique sur le texte »Accueil ».
- <a href= »bien-insert.php »>Ajouter un bien</a> :Ce lien permet de rediriger l’utilisateur vers une page où il peut ajouter un nouveau bien. Le fichier bien-insert.php est appelé lorsque l’utilisateur clique sur ce lien.
- <a href= »../session-out.php »>Déconnexion</a> :Ce lien permet à l’utilisateur de se déconnecter. Le fichier session-out.php, situé dans le dossier parent, est exécuté pour mettre fin à la session active.
Page | Description |
|---|---|
index.php | Lien vers la page d’accueil |
bien-insert.php | Lien pour ajouter un bien |
../session-out.php | Lien pour déconnexion |
Tableau 1 : les liens vers pages
Avant d’ajouter le code CSS, il est important de comprendre que la mise en forme d’une barre de navigation ne se limite pas à la simple disposition des liens. Vous allez désormais améliorer l’apparence visuelle de cette barre en appliquant du style à l’aide de CSS. Cela permettra de créer une interface plus intuitive et esthétique pour les utilisateurs. Voici donc le code CSS qui va styliser la barre de navigation que vous venez de créer en HTML.
/** NAV **/
nav{
height: 100vh;
width: 60px;
background-color: #34495e;
position: fixed;
}
/** NAV **/
Résultat d’affichage :
Le code ci-dessus vous permet de générer une barre de navigation fixe située à gauche de la fenêtre, avec un fond bleu foncé. Cette barre contient trois liens : Accueil, Ajouter un bien, et Déconnexion, qui vous redirigent vers les pages correspondantes.
Ensuite, vous allez inclure ce fichier dans tous les autres fichiers
<?php
include('_nav.php');
?>
Icônes Font Awesome dans navigation
Pour insérer des icônes sur la barre de navigation, vous pouvez utiliser des bibliothèques d’icônes telles que Font Awesome ou Material Icons. Voici comment vous pouvez le faire en utilisant Font Awesome,
Choix des icônes : Assurez-vous de choisir des icônes appropriées pour chaque action afin d’améliorer l’expérience utilisateur et la compréhension des fonctionnalités de la barre de navigation.
Étapes pour ajouter des icônes à la barre de navigation
- Inclure la bibliothèque d’icônes :Ajoutez le lien vers la bibliothèque Font Awesome dans la section <head> de votre fichier HTML.
- Modifier la barre de navigation pour inclure des icônes :Ajoutez les classes d’icônes Font Awesome aux éléments de la liste dans votre fichier _nav.php.
<nav>
<div class="logo">
<i class="fa-solid fa-house-laptop"></i>
</div>
<ul>
<li>
<i class="fa-solid fa-house"></i>
<a href="index.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Accueil</a>
</li>
<li>
<i class="fa-solid fa-circle-plus"></i>
<a href="bien-insert.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Ajouter un bien</a>
</li>
<p></p>
<li>
<i class="fa-solid fa-circle-notch"></i>
<a href="../session-out.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Déconnexion</a>
</li>
</ul>
</nav>
Résultat d’affichage :
En suivant ces étapes, vous obtenez une barre de navigation améliorée visuellement. Vous verrez que chaque élément de navigation est accompagné d’une icône, rendant l’interface plus intuitive et agréable pour les utilisateurs.
Styliser la barre de navigation dynamique
Pour mettre en forme la barre de navigation, vous devrez ajouter des styles CSS afin de rendre la navigation plus esthétique et fonctionnelle. Voici une approche pour styliser votre barre de navigation :
/** NAV **/
nav{
height: 100vh;
width: 60px;
background-color: #34495e;
transition: 0.3s;
position: fixed;
z-index: 100;
overflow: hidden;
}
nav:hover{
width: 250px;
}
nav .logo{
background-color: #fff;
padding: 25px 0;
margin-bottom: 30px;
}
nav .logo i {
font-size: 40px;
color: #95a5a6;
margin-left: 4px;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
width: 250px;
}
nav li {
padding: 15px;
transition: 0.3s;
}
nav li:hover{
background-color: #2c3e50;
}
nav li i {
font-size: 25px;
color: #f1c40f;
}
nav li a {
color: #f1c40F;
text-decoration: none;
}
nav p{
border-bottom: 2px dashed #2c3e50;
}
/** NAV **/
Résultat d’affichage :
En appliquant ces styles, vous transformerez votre barre de navigation en un élément interactif et élégant. Vous remarquerez que la barre de navigation s’étend lorsque vous passez la souris dessus, rendant les éléments plus visibles et accessibles. Les icônes et liens changent de couleur pour une meilleure lisibilité et un design plus moderne.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer une structure HTML pour une barre de navigation ?
Comment styliser une barre de navigation avec CSS ?
Comment rendre une barre de navigation dynamique avec PHP ?
Quelles icônes utiliser pour une barre de navigation ?
Comment inclure des icônes dans la barre de navigation ?
Conclusion
En suivant ces étapes, vous pourrez concevoir une barre de navigation qui est non seulement fonctionnelle, mais aussi esthétiquement plaisante. Quelle autre fonctionnalité aimeriez-vous intégrer pour améliorer votre interface utilisateur?
