Un seul code HTML pour différents styles sans javascript et image
Avant tout, ayez toujours en tête qu'un menu de navigation est principalement constitué de liens vers un autre endroit de la page présente, vers une autre page du même site, voire vers un autre site. Ces liens sont définis et gérés par défaut par votre navigateur. Même si vous n'indiquez aucun code spécifique, ces liens fonctionneront. Le code CSS ne sert qu'à modifier l'aspect de votre code HTML.
Autre chose à garder en tête, c'est qu'une propriété enfant hérite des caractéristiques de sa propriété parent.
Pour la partie HTML identique pour tous les menus, j'ai utilisé une liste ordonnée habituelle pour les menus.
Menu de base:
Une seule propriété spéciale {display:inline;} afin de mettre les sous menus sur une même ligne.
Fonctionne parfaitement avec les navigateurs Chrome, Firefox, Opéra et Internet Explorer.
Pour la partie CSS de ce menu de base, je me suis contenté de donner:
-un peu de marge haute et basse au menu,
-une fonte spécifique (fonte, taille, couleur, majuscule) aux liens,
-de mettre les sous-menus en ligne (je veux dire qu'ils seront visibles sur une seule ligne),
-de mettre un espace à gauche entre les liens des sous-menus puis de leurs affecter une fonte différente (taille, minuscule, couleur),
-et enfin de donner une autre couleur aux liens quand ils sont survolés par votre souris.
Boutons "3D":
Création de dégradés, de coins arrondis et d'ombres.
Les dégradés et les arrondis fonctionnent bien avec les navigateurs Chrome, Firefox, Opéra.
Pour Internet Explorer, si l'on met des arrondis, les dégradés sont... dégradés. J'ai donc fait le choix de supprimer ces dégradés et de conserver les arrondis pour ce navigateur.
C'est dans ce fichier CSS que nous modifions les 3 propriétés nouvelles:
-Les dégradés: les navigateurs gérant différemment cette propriété, il faut spécifier des codes différents pour chacun (voyez le code). Afin que IE et les vieux explorateurs soient pris en charge, ne pas oublier un {background:...;} ordinaire.
-Les arrondis: là, tous les navigateurs récents comprennent {border-radius:...;}. Sur les autres, les coins ne seront pas arrondis, c'est pas mortel.
-Les ombres: même remarque, {box-shadow:...;} fonctionne bien. A noter que pour donner l'effet réalisé, j'ai utilisé un mélange de {border:outset...;} et {box-shadow:outset et inset...;}.
Sous menus slidés (glissant):
Utilisation du pseudo-élément ::before{content:...} et de la propriété {transition:...}
Marche bien avec Chrome, Firefox et Opéra. Sous IE, pas de transition, mais c'est malgré tout fonctionnel.
Afin que les sous menus slidés n'apparaissent pas au moment de leurs replis, j'ai été contraint de modifier légèrement le fichier HTML en incluant {style="position:relative; z-index:100; background:#F2E7D2;"} dans les balises placées au dessus du menu (cela a pour effet de positionner ces balises sur le dessus et de leurs donner une couleur de fond).
Pour le CSS, je réutilise les dégradés et autres propriétés déjà vues; mais voyons les nouvelles:
-::before{content:"";...}: il s'agit de créer un faux élément vide (en réalité le background des boutons) et de le positionner derrière le texte des boutons..
-transition:... Là encore il faut insérer un code différent pour chaque navigateur. Le résultat est que entre l'état normal (au repos) et l'état :hover (lien survolé par la souris), le navigateur mettra un certain temps (ici 3/4 de seconde pour se développer et 1 seconde pour rentrer).
Pensons à positionner chaque élément dans le bon ordre, les sous menus derrière, le fond des boutons plus proche, le texte des boutons devant. N'oublions pas également que les propriétés enfants héritent des caractéristiques de leurs parents, il faut donc supprimer certains effets des sous menus hérités des menus.
Sous menus tournoyant:
Utilisation des propriétés transform:rotate(...); et transform-origin:...; puis des sélecteurs :last-child et :nth-child(...)
Marche bien avec Chrome, Firefox et Opéra. Sous IE, pas d'effefts visuels, mais c'est malgré tout fonctionnel.
Bien entendu, je reprends la base des styles vus précédemment. Mais là je vais faire tournoyer le sous menu au survol du menu par la souris; je vais affecter des couleurs différentes à chaque sous menu; puis lorsque la souris quittera le menu, je rangerai tout cela.
Pour le CSS, au repos les sous menus sont rendus invisible {opacity:0;} retournés {transform:rotate(-810deg);} l'origine de ce retournement est fixé {transform-origin:center bottom;}. Lors du menu:hover, les sous menus sont rendus visibles {opacity:1} remis de face {transform:rotate(0);} et ceci en utilisant une transition rapide pour l'apparition {transition:all .75s linear 0s;} et une transition plus lente pour la disparition avec un temps d'attente de 0,5 seconde grâce à {transition:all 1.5s linear .5s;}
Grosse nouveauté, l'utilisation des sélecteurs. Ici, nous désirons sélectionner le 1er élément de la liste des sous menus, nous le ferons avec {:nth-child(1)} pour lui affecter une couleur de background et de bordure spécifique; puis nous ferons de même avec chaque élément {:nth-child(...)}.
Afin de donner des arrondis uniquement au dernier élément de la liste (le bas du sous menu) nous utiliserons {:last-child}.
Sous menus dépliables (flip):
Utilisation des propriétés {perspective:...;} {transform:rotateX(...deg);} et {transition:all ...s linear ...s;} et des sélecteurs :nth-of-type(...)
Fonctionne correctement avec Chrome et Firefox. Sous Opéra pas de retournement et sous IE aucun effet; mais les liens marchent néanmoins.
Pour la partie HTML, j'ai été contraint de modifier la structure du menu (certaines propriétés ne sont pas bien gérées) en le simplifiant; genre:
Pour le style, je désirais que mes sous menus se déplient l'un après l'autre en se mettant en position. Il me fallait donc faire tourner, descendre et faire apparaître chaque sous menu individuellement en commençant par le premier; mais lors de la fermeture commencer par le dernier.
J'ai, pour cela, combiné les propriétés:
- {perspective:...px;} qui créée une perspective vers l'extérieur de l'écran associée
- {transform:rotateX(...deg);} qui fait pivoter le contenant
- {margin-top:...px;} qui pose le contenant à sa place
- {opacity:...;} qui rend le contenant invisible/visible
- et surtout {transition:all ...s linear ...s;} pour faire des transitions entre les différentes positions
- appliquées individuellement à chaque sous menu suivant sa place dans l'animation avec :nth-of-type(...).
Sous menus pop-up colorés:
Utilisation des pseudo-éléments ::before pour la création d'une petite flèche.
Fonctionne avec tous les navigateurs modernes mis à jour... si, si même IE, vous ne rêvez pas.
Pour le CSS, la seule nouveauté consiste, afin de créer une flèche, à mettre en place un pseudo-élément; c'est à dire d'inventer un élément qui viendra se positionner au-dessus du sous menu avec un {::before{content:"";position:absolute;top:-10px;left:10px;width:0px;height:0px;border-bottom:10px solid rgba(255,156,11,1);border-left:10px solid transparent;border-right:10px solid transparent;}
Pour corser le tout, j'ai choisis de donner une couleur différente à chaque sous menu et donc à chaque flèche avec :nth-child(...) ol::before...
Sous menus coloré glissant horizontalement:
Pas de nouvelles proprétés, mais la combinaison des pseudo-éléments et de transition:...
Marche bien avec Chrome, Firefox et Opéra mais pas de transition sous IE.
Pour le style, l'astuce consistait à donner une position right spécifique à chaque sous menu au repos (c'est à dire de le mettre loin à gauche ou à droite) puis, lors du survol par la souris du menu, redonner au sous menu une position right:0px tout cela en les rendant visibles et avec une transition plus ou moins lente.
Menus et sous menus rebondissant:
Utilisation de la propriété {animation:...;} qui déclenche une animation gérée avec @-keyframes ...{...}
Marche parfaitement avec Chrome et Firefox et est juste fonctionnel avec Opéra et IE.
Je désirais que lors du survol du menu par la souris, le sous menu correspondant arrive du bas de l'écran, qu'il entre en collision avec son menu et qu'il le fasse rebondir plusieurs fois en rebondissant lui aussi. Pour cela, j'ai créé deux animations:
- l'une pour le sous menu avec translateY variable à 0%, 40%, 60%, 70%, 80%, 90% et 100% du temps que dure l'animation;
- une autre pour le menu avec translateY à 60%, 70%, 80%, 90% et 100%.
La seconde animation commence à 60% du temps quand le sous menu entre en collision, ce qui donne l'effet que c'est le premier qui "pousse" le second.
Lorem ipsum
Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.
Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.
Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.
Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.