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

 

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. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
acid3 test css3 navigateur
Testez la compatibilité CSS3 et HTML5 de votre navigateur.

Pour profiter pleinement de toutes les nouveautés de HTML5 et CSS3, il est important d'avoir un bon navigateur web et...

chargement pages wordpress
7 plugins et 5 conseils pour accélérer WordPress.

Quelle est l'origine de la lenteur de Wordpress ? WordPress est un excellent CMS, mais il a néanmoins quelques défauts,...

marble_blast
Marble Blast Saga : le jeu de l’été pour Android

Le principe du jeu est simple. Une "chenille" de boulets colorés se déplacent vers sur un circuit vers un trou...

Fermer