Menu de navigation

Généralités

Ce site ne dispose pas d'un contenu très foisonnant, aussi il n'y a pas plus de 2 niveaux au maximum. En conséquence, une navigation avec uniquement les catégories principales suffit !

Le contenu est intégré au sein du nouvel élément HTML 5 nav, qui est tout indiqué dans ce cas :)
Les options de menu sont contenues dans une liste UL/LI.

Initialement, des icones en image étaient présentes sur chaque entrée, mais je les ai remplacé par des emoji. Par conséquent le rendu est maintenant dépendant de la plateforme... En général on utilise donc plutôt des solutions comme Font Awesome afin de se prémunir de ce problème, mais j'ai ici préféré la simplicité considérant que ces différences de rendu n'étaient pas très importantes. D'autant que les emoji utilisés sont très communs et identifiables par tous !
Remarque : mon fichier CSS est enregistré et servit en UTF-8, aussi pas de soucis pour y inclure directement les caractères voulus. Si ça n'avait pas été le cas il aurait toujours été possible d'inclure des emoji par échappement comme l'indique la recommandation.

<nav>
	<ul>
		<li>
		<a href="<?= ($RelBasePath == "") ? "index.php" : $RelBasePath; ?>" id="menu_accueil">
				🏡<Accueil</a>
		</li>
		<li>
			<a href="<?= $RelBasePath ?>info/" id="menu_info">
				💻<Informatique</a>
		</li>
		<li>
			<a href="<?= $RelBasePath ?>zicmue/" id="menu_zicmue">
				🎵<Musiques</a>
		</li>
		<li>
			<a href="<?= $RelBasePath ?>moi/" id="menu_moi">
				👤<Moi</a>
		</li>
		<li>
			<a href="<?= $RelBasePath ?>liens/" id="menu_liens">
				🔗<Liens</a>
		</li>
	</ul>
</nav>

Positionnement

Je souhaitait un menu affiché en bas et fixe. Deux solutions pour obtenir cet effet :

• des frames : énormément d'inconvénients (principalement autour de l'url figurant dans le navigateur qui est celle du frameset), pour un avantage minime !
• du positionnement CSS avec position: fixed

C'est donc évidemment la 2ème solution que j'ai retenue ! Malheureusement au moment de la mise en place le support était assez restraint, j'avais alors utilisé le polyfill JavaScript IE7. Lors des mises à jour de août 2014 j'ai jugé qu'il n'était plus nécessaire et l'ai supprimé (comme on le voit sur caniuse.com le support est bon sur une grande majorité de navigateurs).

Pour séparer le menu du reste de la page, une bordure particulière est appliquée (la liste des styles de bordure dans la recommandation), avec un border-radius pour créer un arrondi en haut (en unité relative comme on le verra dans la page sur le responsive) :

border: 1px solid grey;
border-bottom: none;
border-radius: 5% 5% 0 0 / 1em 1em 0 0;

Egalement est appliqué au menu un fond différent du reste de la page.

Une opacité est réglée afin de voir le contenu défiler sous le menu.

Liens

Afin de pouvoir appliquer des margin/padding aux liens, on leur ajoute un display: inline-block;.

Des séparateurs sont ajoutés simplement avec une bordure à gauche, sauf sur le premier élément.

nav a
{
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;

    border: 1px outset transparent;
    border-left: 1px solid gray;

    font-size: 0.9em;
    text-decoration: none;
}

nav>ul>li:first-child>a {
    border-left-color: transparent;
}

:hover

Un petit effet graphique est ajouté au survol de chaque rubrique avec une couleur de fond dédiée, et une animation de transition (cf page dédiée du MDN).

nav a
{
	/* ... */
    background-color: transparent;
    transition: background 0.6s;
	/* ... */
}


nav a:hover
{
    background-color: white;
}

Création le 13/08/2014
Dernière mise à jour le 16/08/2024

Un oubli, une erreur, une suggestion ? Rendez-vous sur le dépôt GitHub !