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 *

Lire plus :
avatar
12 sites pour créer un avatar en ligne.

Pour ce démarquer des autres, un avatar original peut faire toute la différence. Dans cet article vous trouverez 12 sites...

Draw Somthing
Draw Something : le meilleur jeu devinette par le dessin pour android

Voici une petite vidéo de présentation de Draw Something Draw Something est un jeu de devinette par le dessin très...

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...

Fermer