Menu CSS3 : avec coins arrondis et dégradés

Ce menu requiert l’utilisation de CSS3 avancés, donc prévoir l’incompatibilité avec certains navigateurs dont principalement IE8.

Notre technique nous permettra donc de créer un menu avec “effet bulle”, sans utiliser de Javascript ni d’images.

Le background du menu

Concernant le background du menu on va utiliser des fonctions CSS3 linear-gradient afin de créer des dégradés en full CSS et aussi le box-shadow pour les ombres sur les boites.

Dans cette démo, on utilise une liste à puce avec des liens. Tout d’abord, on applique un dégradé , puis un ombrage sur le <ul>, en prenant soin de ne pas oublier les versions préfixées.

Le hover sur le menu

Au survol, le dégradé est composé de plusieurs étapes : de #222 vers #222 en passant par #555 entre 5% et 95%. Voici les différentes syntaxes, en fonction des navigateurs.

Et pour spécifier une couleur de background différente et de bordure propre à chaque item de menu on va utiliser le sélecteur CSS3 :nth-child et ce sera aussi valable pour leur élément enfant ainsi que leur hover.
L’utilisation de classe est donc inutile, le code HTML en est allégé.

Les petites flèches

Pour les petites flèches, on utilise les pseudo-éléments ::before ou ::after afin de créer les triangles pour éviter d’utiliser des images .Pour ce faire, un nouvel élément est ajouté, lequel reçoit des bordures énormes.
Cela provoque l’affichage de triangle.

Répondre