Share
Nous avons récemment publié un excellent tutoriel qui a intégré le menu de navigation verticale d’Orman Clark à un accordéon flexible, alimenté par jQuery. Il est en fait possible de faire fonctionner le tout sans s'appuyer sur jQuery, et c'est l'occasion parfaite de jouer avec le CSS: le sélecteur de cible.
Nous allons oublier jQuery et utiliser plutôt le CSS :cible pseudo sélecteur pour élargir et réduire notre menu accordéon.
Pour rappel, voici la démo originale de jQuery, puis voici l'approche purement CSS.
Accentsconagua
:cible Pseudo sélecteurVous connaissez sans doute des URL ressemblant à ceci: http://www.w3.org/TR/selectors/#target-pseudo. Il se termine par un signe # et un identifiant d'élément, qui permet au navigateur d'accéder directement à cet élément. Cette URL particulière en est l’exemple parfait - elle vous amène à l’en-tête avec un identifiant de # pseudo-cible (n'hésitez pas à aller lire).
Lorsqu'il est cousu à la fin d'une URL, cet identifiant est appelé identificateur de fragment. Il n'est pas simplement utilisé pour amener le navigateur à un emplacement de la page, il peut également être utilisé via CSS pour identifier l'élément en question..
En bref; nous utilisons :cible sélectionner et manipuler l'élément dans l'identifiant de fragment.
Commençons par télécharger les fichiers sources originaux du premier tutoriel. Le style est déjà fait pour nous, il est donc inutile de réinventer la roue.
Commencez par ouvrir index.html. À la ligne 10, vous verrez que jQuery est référencé. Nous n'aurons pas besoin de ça, alors débarrassez-vous-en.
Menu de navigation verticale: codée CSS3
Ensuite, au bas du document, vous trouverez la fonction qui permet à l’accordéon jQuery de fonctionner correctement. Débarrassez-vous de tout ça aussi.
Excellent. Nous avons maintenant une base beaucoup plus propre.
Comme mentionné ci-dessus, le :cible Le sélecteur pointera sur tout élément auquel il est fait référence dans l'identifiant de fragment. Nous devons donc nous assurer que nos éléments de liste principaux ont tous des identifiants uniques et que leurs ancres ont des liens correspondants:
Maintenant, lorsque vous cliquez sur les liens, vous verrez un identifiant de fragment apparaître dans l'URL:
Actuellement, après avoir supprimé tous les bits et bobs de jQuery, l'accordéon sera complètement développé. Nous avons besoin que son état initial soit réduit, afin que nous puissions révéler chaque sous-section lorsque les liens sont cliqués.
Rendez-vous sur le fichier CSS existant, nous allons ajouter quelques règles au bas:
/ * styles supplémentaires * / .menu> li> ul height: 0; débordement caché;
Nous pointons sur nos sous-menus ici; tout descendant direct des éléments de la liste .menu. Nous disons que leur hauteur initiale est 0 et que tout débordement est masqué pour éviter que le contenu ne passe à la vue. Nous avons maintenant tout effondré. Et c'est comme ça que ça va rester à moins que nous fassions quelque chose à ce sujet…
Nous voulons que chaque sous-menu se développe, mais uniquement lorsque nous avons cliqué sur son lien parent. Utilisons :cible pour les sélectionner:
.menu> li: cible> ul hauteur: auto;
En termes simples, ceci dit: "Vous voyez ce qui est mentionné dans l’url? Bien, changez la hauteur du ul qui se trouve dedans en auto". Une fois que vous avez cliqué ailleurs et que l'identifiant n'apparaît plus dans l'URL, le sous-menu se réduit à nouveau. L'essayer!
Visuellement, il reste quelques choses à faire. JQuery n'affecte plus l'état actif, nous devons donc nous assurer que nos éléments de la liste: target sont en bleu. Ceux-ci n'existent plus:
.menu> li> a.active
.menu> li a.active span
Alors échangez-les contre ceux-ci:
.menu> li: cible> a
.menu> li: cible> un span
Nous allons également ajouter une bordure au bas de nos sous-menus développés:
.menu> li: cible> ul hauteur: auto; fond de bordure: solide 1px # 51555a;
OK, Orman sera content de ça :) Découvrez ce que nous avons jusqu'à présent.
Je connais. Vous criez à l'écran "Qu'en est-il des transitions en douceur?!" Je crains que vous ne soyez déçu. Sauf si nous spécifions une hauteur définie pour les sous-menus, nous ne pouvons pas utiliser les transitions CSS pour développer et réduire en douceur notre accordéon. Les transitions ne joueront pas bien avec hauteur: auto. Bien sûr toi pourrait spécifier une hauteur définie:
.menu> li: cible> ul hauteur: 7,9 µm; fond de bordure: solide 1px # 51555a;
puis appliquez les transitions:
.menu> li> ul hauteur: 0; débordement caché; -webkit-transition: hauteur 0.3s facile à installer; -moz-transition: hauteur 0.3s facile à insérer; -o-transition: hauteur 0.3s facile à insérer; -ms-transition: hauteur 0.3s easy-in-out; transition: hauteur 0.3s easy-in-out;
… Mais votre menu ne sera plus 100% flexible. Vous serez limité à un nombre spécifique (3) d'éléments de sous-menu. Découvrez la démo.
Ce que nous pourrait faire, juste pour arranger les choses, est d’ajouter une transition à une autre propriété. Nous ne pouvons pas avoir la transition de hauteur, nous allons donc nous contenter d'une transition d'opacité:
.menu> li> ul hauteur: 0; débordement caché; opacité: 0; filtre: alpha (opacité = 0); / * IE6-IE8 * / / -webkit-transition: l'opacité 0.9s easy-in-out; -moz-transition: opacité 0,9 seconde; -o-transition: opacité 0,9s easy-in-out; -ms-transition: opacité 0,9s easy-in-out; transition: opacité 0,9s easy-in-out; .menu> li: cible> ul hauteur: auto; fond de bordure: solide 1px # 51555a; opacité: 1; filtre: alpha (opacité = 100); / * IE6-IE8 * /
Ce que nous avons fait est de définir l'opacité par défaut du sous-menu sur 0; non seulement il a une hauteur de 0, il est maintenant transparent aussi. Nous définissons ensuite les transitions sur l'état par défaut. En position de survol, il reste toujours ouvert, mais le contenu apparaît en fondu. Un peu plus facile pour les yeux.
Un autre problème est le fait que :cible n'est pas reconnu par les navigateurs plus anciens (Internet Explorer 8 et inférieur), de sorte que notre menu réduit est rendu inutile dans ces navigateurs. Appliquons quelques méthodes alternatives qui rendront au moins la navigation accessible.
Tout d'abord, nous allons ajouter un commentaire conditionnel (après notre demande CSS initiale) pour insérer un fichier CSS secondaire si le navigateur est Internet Explorer 8 ou une version antérieure:
Ensuite, dans ce fichier, nous répétons simplement les règles sur lesquelles nous venons de travailler, mais au lieu d'utiliser :cible, nous utilisons :flotter.
.menu> li: survol> ul height: 7.9em; fond de bordure: solide 1px # 51555a;
Encore une fois, consultez la démo. Ce n'est pas exactement ce que nous recherchions, mais au moins c'est une navigation accessible, à compatibilité descendante.
Si vous avez le choix, vous opterez probablement encore pour l’approche jQuery; il est également accepté dans tous les navigateurs (tant que JavaScript est activé) et l'effet est plus fluide. Pourtant, si vous n'étiez pas au courant de la :cible sélecteur, nous espérons que ce petit conseil vous donnera un aperçu du potentiel CSS.
