10 effets javascript et CSS pour menus

Vous cherchez quelques petits codes pour animer vos menus et rendre vos liens textes plus funs ?

menu CSS javascript

Dans ce petit article, vous trouverez quelques exemples d’effets sur des liens textuels, utilisant javascript et les CSS. Les exemples donnez ici peuvent être étendus à tous les styles touchant la typographie. Passez la souris sur les liens pour voir l’effet.

Les petits scripts précedents utilisent les évènements Javascript onmouseover et onmouseout, pour modifier les valeurs des attributs CSS.

N’oubliez de remplacer « # » du lien par votre véritable lien, sinon ben ça ne mènera nulle part.

Lien Souligné

<a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'" href="#">
Lien souligné
</a>

Lien Surligné

<a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'overline'" onmouseout="this.style.textDecoration = 'none'" href="#">
Lien surligné
</a>

Lien Barré

<a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'line-through'" onmouseout="this.style.textDecoration = 'none'" href="#">
Lien barré
</a>

Lien en gras

<a style="font-weight: normal;" onmouseover="this.style.fontWeight = 'bold'" onmouseout="this.style.fontWeight = 'normal'" href="#">
Lien en gras
</a>

Lien Espacé

<a style="letter-spacing: 2px;" onmouseover="this.style.letterSpacing ='3px'" onmouseout="this.style.letterSpacing='2px'" href="#">
Lien espacé
</a>

Lien Majuscule

<a style="text-transform: none;" onmouseover="this.style.textTransform ='uppercase'" onmouseout="this.style.textTransform='none'" href="#">
Lien majuscule
</a>

Lien Capitales

<a style="text-transform: none;" onmouseover="this.style.textTransform ='capitalize'" onmouseout="this.style.textTransform='none'" href="#">
lien capitales
</a>

Lien Texte Coloré

<a style="color: orange;" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'orange'" href="#">
Lien texte coloré
</a>

Lien à fond colorés

<a style="color: yellow; background: orange;" onmouseover="this.style.background = 'red'" onmouseout="this.style.background = 'orange'" href="#">
Lien à fond coloré
</a>

Pour changer les couleurs, il suffit de remplacer les noms de couleurs par des valeurs hexadécimales précédées de #. Les codes hexadécimaux xont disponibles sur ce lien :
5 conseils et 11 sites pour harmoniser les couleurs de votre site

Bon maintenant, il ne reste plus qu’à vous amuser et si ça vous a plus à partager ou a télécharger au format PDF

Télécharger l’article au format PDF

 



En relation avec cet article

One Comment

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. Apprenez comment les données de vos commentaires sont utilisées.

Lire plus :
retroweb du mois
La rétro du web #12

La rétro du Web c'est le top des articles, les meilleures découvertes, les surprises des dernières semaines. Allez jeter un...

navigation privée
Comment surfer incognito sur le web ?

Quel point commun existe-t-il entre une vache, un médicament et un surfeur du web ? La traçabilité. Aujourd'hui, la vie...

Bookmarklet
3 générateurs de Bookmarklets et 40 bookmarklets à installer.

Les bookmarklets sont ces liens, souvent présentés sous la forme de boutons que l'on peut placer dans la barre des...

Fermer