Effet de surlignement sur les onglets de menu

Effet de surlignement sur les onglets de menu

Pour un template wordpress, j’ai cherché un moyen de créer des surlignements dynamiques sous les titres de mes menus, mais ceci vaut pour n’importe quel type de site, puisqu’il s’agit ici de css et de jQuery. Par dynamique j’entends le fait d’avoir un surlignement qui apparaît au survol de la souris, ou qui suit la souris progressivement comme on le voit sur de nombreux sites.

Une solution en jQuery

En jQuery, une solution simple consiste à utiliser l’élément position, qui nous retourne la valeur top et left de la position d’un élément par rapport à son parent. Le « span » fixé à « left 0 » au départ suit donc l’élément parent qui est survolé. Le « .width » permet de donner dynamiquement une largeur à notre surlignement et s’adapte comme on le voit à la largeur de l’élément courant: ‘$(this)’. Comme on le voit sur le CodePen suivant, la barre change de taille selon les mots qu’elle souligne.

See the Pen NPvKRP by yuyazz (@yuyazz) on CodePen.

Une solution en css

Une autre solution, le rendu ne sera pas tout à fait équivalent, est d’utiliser uniquement du css : Ici on joue sur le hover

See the Pen VYzZPE by yuyazz (@yuyazz) on CodePen.

Pour rapprocher ou éloigner la barre, il faut jouer sur le padding du lien, et pour rallonger ou diminuer la barre, il faut jouer sur la width du li a:hover:after

Une autre solution en css

Encore une autre manière,  une ligne  qui suit le survol de la souris, rien qu’au css: ici on reproduit le même mécanisme que le premier exemple en jQuery. Au lieu de se baser sur la width de l’élément précédent, on applique une margin left proportionnelle à la taille de notre lien. Il fait 25%, pour chaque onglet on rajoute donc 25% de marge à chaque fois. Ici on joue donc sur les marges

See the Pen hover effect on menu4 by yuyazz (@yuyazz) on CodePen.

Un surlignement au clic avec jQuery

Pour rendre le même effet mais au clic, on peut reprendre le premier codePen, et le modifier un peu: ici on grâce aux fonctions jquery « .addClass » ou « .removeClass » on rajoute une classe underline qu’on a stylisé au préalable dans notre css.

See the Pen menu underline click by yuyazz (@yuyazz) on CodePen.

Une dernière solution de surlignement au clic avec jQuery

Dans l’exemple suivant, on modifie dynamiquement l’effet sur le menu avec la fonction « .css »:

See the Pen click effect menu by yuyazz (@yuyazz) on CodePen.