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

 

Ces articles pourraient vous intéresser :
One Comment

Add a Comment

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

Lire plus :
QR barcode scanner
5 Lecteurs de QR codes gratuits.

Dans la continuité de l'article sur la création de QR Codes en ligne, voici 5 applications Andoïd permettant de lire...

javascript
Héberger vos fichiers JavaScript sur un site spécialisé.

Pour héberger des fichiers JavaScript, il existe un site  spécifiquement dédié aux fichiers JavaScript et uniquement aux fichiers JavaScript.  Quel est...

Javascript_Editeur
3 éditeurs – interpréteurs HTML et Javascript en ligne

Pour créer de page HTML ou tester des scripts Javascript, inutile de télécharger des logiciels complexes. Editer et interpréter directement...

Fermer