-
Menu déroulant au survol de la souris
Code à mettre dans la partie CSS.
Etant donné que le code CSS est très long, j'ai déjà rendu le code un peu plus lisible. Les mots en noir sont des commentaires, ils ne seront pas pris en compte dans votre code css.
/* TITRE */
Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : calibri.
Le X désigne la taille du titre.
Le premier COLOR désigne la couleur du titre alors que le deuxième COLOR désigne la couleur du fond du titre. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
La ligne width correspond à la largeur de votre menu.
La dernière ligne correspond à l'opacité. Elle va de 0 à 1.
/* SOUS LIENS */
La ligne width correspond à la largeur de votre menu.
La ligne height correspond à la taille qui va s'afficher quand vous survolez le menu. Si vous rajoutez un lien, il faudra agrandir la valeur.
Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : Times New Roman.
Le X désigne la taille des liens.
Le premier COLOR désigne la couleur des liens alors que le deuxième COLOR désigne la couleur du fond des liens. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
/* SOUS LIENS AU SURVOL */
Le premier COLOR désigne la couleur des liens au survol alors que le deuxième COLOR désigne la couleur du fond des liens au survol. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
Pour le reste des valeurs, vous pouvez les modifier comme vous souhaitez. Il faut juste chipoter pour que tout soit correct.
/!\ Si jamais le premier lien apparait, il faut changer la valeur de la ligne en vert.
/* TITRE */
.nav {
font-family: POLICE;
font-size: Xpx;
margin-bottom: 25px;
margin-top: 10px;
text-align: center;
background-color: COLOR;
color: COLOR;
width: 200px;
display: block;
opacity: 1;
}
/* SOUS LIENS */
.navbar {
width: 200px;
height: 70px;
overflow: hidden;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease
}
.navbar:hover {
height: 210px;
}
.navig a {
letter-spacing: 1px;
font-family: POLICE;
font-size: Xpx;
text-align: center;
margin-bottom: 0px;
background-color: COLOR;
color: COLOR;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
display: block;
padding: 5px;
}
/* SOUS LIENS AU SURVOL */
.navig a:hover {
background-color: COLOR;
color: COLOR;
letter-spacing: 2px;
text-align: center;
padding-left: 40px;
}Code à mettre dans la partie HTML.
Remplacer TITRE par le titre de votre menu.
Remplacer NOM DU LIEN 1 par le nom de votre lien.
Remplacer LIEN 1 par l'url de votre lien.
Faites la même chose pour tous les liens. Vous pouvez rajouter autant de liens que vous voulez.
/!\ Si vous rajoutez un lien, n'oubliez pas de modifier la ligne mauve du code css.
<div class="navbar">
<div class="nav" style="text-align: center;">TITRE</div>
<div class="navig" style="text-align: center;"><a href="LIEN 1">NOM DU LIEN 1</a> <a href="LIEN 2">NOM DU LIEN 2</a> <a href="LIEN 3">NOM DU LIEN 3</a> <a href="LIEN 4">NOM DU LIEN 4</a> <a href="LIEN 5">NOM DU LIEN 5</a></div>
</div>
-
Commentaires
Ba je l'avais pour le tout premier thème du blog mais avec la mise à jour du blog, j'ai dû tout réparé le code car il ne fonctionnait plus. u.U
De rien ! Il faudra peut-être chipoter au niveau des valeurs car Eklablog fait buger le code. xD
Suivre le flux RSS des commentaires
Ajouter un commentaire
Purpel in the face
-
Bienvenue sur Purpel in the face ! Un blog créé et géré par Lockpine depuis 2014. Ce blog regroupe des heures passées sur Internet à faner. Aucun mot ne serait assez correct pour le décrire au vu de son existence douteuse. Mais je vous rassure, on est parfois normal ici.
-
23 ansBelgique
Etudes • Psychologie
League of Legends addict
Everyone you meet is fighting a battle you know nothing about. Be kind. Always.
Créer mon blog
Oh merci depuis le temps que je le cherchais !! Ces codes me seront très utiles :3