Dans ce tuto je vous apprendrai à créer un menu comme celui que j'ai créé pour Succubus Graphics à l'aide de la feuille de style css ; Nous allons faire et les titres, et les liens.
Tout d'abord, nous avons besoin de deux images, voici celles que j'ai créées, vous pouvez créer les votres.
La première s'affiche à gauche du lien, la seconde lorsque le curseur est sur le lien, les miennes étaient sur fond noir, mais à vous de créer les votres.
Elles sont à héberger dans un fichier /images pour ne pas vous embrouiller. Si vous souhaitez les héberger autre part il faudra changer l'url de l'image dans le code css.
Ouvrez votre éditeur, et collez ceci dans la partie css :
.headnavi
.{
color: #8bad55;
font-family :georgia, arial;
background-color: #181818;
border-bottom: 1px dotted #000000;
line-height:18px;
padding: 15px 5px 0px 25px;
}
h5
{
color: #f03d74;
text-align: right;
margin-top: -19px;
font-family :georgia, arial;
}
#menu a:hover, #menu a:visited:hover
{
color: #a2151f;
cursor: crosshair;
display: block;
background-image: url(images/hover2.gif);
backgrounde;
}
#menu a, #menu a:visited
{
color: #3b484e;
text-decoration: none;
display: block;
padding-left: 20px;
background-image: url(images/hover1.gif);
background-repeat: no-repeat;
outline: none;
}
Explications
.headnavi est la balise du titre, c'est une class.
h5 est une balise de titre, on ne met pas de point devant.
#menu est la div dans laquelle vous allez insérez votre menu, si vous codez en div, vous pouvez aussi donner la position de la div.
background-image: url(images/hover2.gif);, on a ici le lien de l'image du lien par défaut (changez l'adresse si vous avez décidé d'héberger autre part).
background-image: url(images/hover1.gif);, ici on a le lien de l'image lorsque le curseur survole le lien(changez l'adresse si vous avez décidé d'héberger autre part).
Passez à présent sur votre feuille html et écrivez-y votre menu :
<div id="menu">
<p class="headnavi">TITRE ICI</p>
<h5>sous-titre ici</h5>
<a href="" target=""">Link here</a>
<a href="" target=""">Link here</a>
<a href="" target=""">Link here</a>
<br>
</div>
Voilà, si vous avez un problème, envoyez moi un mail <3
posté par Dark. le 17/04/09
