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 :
couverture_outils-web
Comment créer et changer une couverture Facebook ?

La TimeTime FaceBook, c'est-à-dire sa couverture est la première chose que remarque un internaute en arrivant sur une page Facebook....

gateau-aniversaire
Candy Crush a un an comme Outils Web !

Vous prendrez bien une part ! Eh oui, le jeu légendaire Candy Crush a un an comme outils-web.fr ! Candy...

sondage
11 sites pour publier un sondage

Les sondages sont indispensables pour un blog ou un site. Ils permettent entre autre de connaître les centres  d'intérêts de...

Fermer