Programmation

10 effets javascript et CSS pour menus

, , , , ,

Comment animer des menus simplement et rendre vos liens textes plus attractifs ?
C’est ce que nous allons voir dans cet article consacré aux liens réacifs en JavaScript.

Pour commencer, rapplelons la structure d’un lien Hypertext en HTML. 

1
<a href="https://lien"> Texte Cliquable </a>

Maintenant voyons comment nous pouvons rendre ces liens réactifs en Javascript. (on pourrait également utiliser les feuilles de styles CSS)

1. Première méthode : utiliser onmouseover

La première méthode consiste à utiliser les méthodes “onmouseover” et “onmouseout” associées aux événements de survol du texte et à la sortie du curseur du texte.
Voyons quelques exemples :

Type de lien Exemple
Lien souligné Lien souligné
Lien surligné Lien surligné
Lien barré Lien barré
Lien gras Lien en gras
Lien ou les lettres s’écartent Lien espacé
Lien devenant en majuscule Lien majuscule
Lien dont les premières lettres deviennent majuscules lien capitales
Lien changeant de couleur Lien texte coloré
Lien dont le fond change de couleur Lien à fond coloré

Voici les scripts associés à chacun de ces exemple, puis nous commenterons ces codes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- 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;text-decoration: none;" onmouseover="this.style.fontWeight = 'bold'" onmouseout="this.style.fontWeight = 'normal'" href="#">
Lien en gras
</a>

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

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

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

<!-- Lien colorés -->
<a style="color: #aaaaaa;text-decoration: none;" onmouseover="this.style.color = '#101010'" onmouseout="this.style.color = '#aaaaaa'" href="#">
Lien texte coloré
</a>

<!-- Lien à fond colorés -->
<a style="color: #ffffff; background: #aaaaaa;text-decoration: none;" onmouseover="this.style.background = '#606060'" onmouseout="this.style.background = '#aaaaaa'" href="#">
Lien à fond coloré
</a>

La partie style = “…” indique le style à appliquer au texte initialement.
La partie onmouveover = “…” change le style souhaité au survol de la souris.
La partie onmouveout= “…” rétabli le style initial lorsque a souris se retire du texte.

N’oubliez pas de remplacer # dans href=”#” par l’adresse du lien vers lequel il pointe.

La méthode que nous venons de vois est simple, mais possède ses limites. Par exemple, on ne peut changer qu’un seul attribut du style CSS, comme la couleur, l’espacement, etc.
Cette manière de procéder est donc dépréciée et on préfère écouter les évènmenents grâce à un “Listener”.

2. Deuxième méthode : utiliser un “event Listener”

Dans cette deuxième partie nous allons utiliser la méthode objet.addEventListener(“type évent”, myFunction);

  • Commençons par créer un lien HyperText avec certains attributs de style : 

    1
    <a href="#" id="lien" style="text-decoration: none;color: navy; font-weight: bold;"> Texte </a>

  • Ajoutons ensuite le code JavaScript suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
// On récupère l'objet d'id "lien" que l'on met dans la variable lien
let lien = document.getElementById("lien");

// On applique un Listener à l'ojet lien pour le survol de la souris
lien.addEventListener(
  "mouseover",
  function (event) {
    // on met l'accent sur la cible de mouseover
    event.target.style.color = "red";
  },
  false,
);

// On applique un Listener à l'ojet lien au retrait de la souris
lien.addEventListener(
  "mouseout",
  function (event) {
    // on met l'accent sur la cible de mouseover
    event.target.style.color = "navy";
  },
  false,
);
</script>
  • Et voici le résultat :
    Le lien passe du bleu foncé (navy) au rouge (red) au survol du texte.

Texte

J’espère que ces éléments de programmation vous aurons aider.
En attendant de vous revoir, je vous souhaite pleins de bonnes choses.

A bientôt sur Outils Web

Partager