Tagmenu déroulant

[CSS] Un menu déroulant avec les sélecteurs adjacents, les propriétes opacity, visibility et transition

[CSS][jQuery] Un menu déroulant fondé sur flexbox (modèle tabulaire en fallback IE9-) et un sous-niveau centré horizontalement avec outerWidth

Avant de mettre en place cette solution, voir en bas de page les contraintes et choses restant à améliorer !!

Simulation : Menu déroulant Flexbox.

Pré-requis :

  • Le premier niveau doit occuper 100% de l’espace disponible en largeur,
  • les libellés de premier niveau ne doivent pas occuper un espace à largeur fixe (chaque libellé à une largeur en fonction de sa longueur),
  • les espaces entre les libellés de premier niveau doivent être strictement identiques,
  • les sous-niveau doivent être centrés horizontalement sur l’axe médian libellé de premier niveau > sous-niveau,
  • compatibilité navigateurs avec prise en charge ciblée des différents états de la spécification de Flexbox (ancienne et nouvelle) et fallback IE10-.

dropdown-flexbox

Quelques aspects techniques :

Remarques importantes pour la compatibilité cross-browsers :

  • Pour effectuer le switch entre vieille et nouvelle spécification Flexbox, les styles ont été déclarés dans l’ordre suivant :
    • 1. les propriétés propres à l’ancienne spécification avec les préfixes -webkit, -moz, -o, et sans préfixe :
    • 2. les propriétés propres à la nouvelle spécification avec un suffixe !important.
  • Ciblage CSS IE9, IE8 obtenu avec la mise en place de commentaires conditionnels dans la balise head de la page et de classes .ie8, .ie9 dans la CSS :

  • Ciblage CSS IE10 obtenu avec la mise en place de la méthode décrite ici : IE 10 Specific Styles.

Code jQuery à exécuter pour centrer les sous-menu par rapport aux largeurs des premiers niveaux

Cas particuliers et adaptation de code à apporter :

Dans le cas où les sous-menus ne sont pas correctement centrés par rapport à l’axe médian, lancer le bout de code jQuery seulement après que la page se soit entièrement chargée :

…ou mieux (sans le bind) :

Remarque à propos de la gestion des paddings par jQuery (notamment sous Chrome) : pour une raison obscure, la valeur du padding (+ 12 dans le calcul de la valeur servant à aligner le sous-menu sur l’axe médian du libellé de premier niveau) concourt à obtenir un alignement correct dans la simulation effectuée par le biais de JSFiddle, mais il a fallu la supprimer dans un autre cas de figure rencontré…

Décalage du sous-menu sous Chrome – appliquer la solution ci dessous :

Fallback IE9- en jQuery

Polyfill IE9- (non-testé – nécessite Selectivizr) : Flexie.js.

A améliorer : l’alignement vertical des libellés de 1er niveau n’est pas géré.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑