Créer un menu CSS graphique à onglet 2
Je viens de créer une image de 500 pixels de large sur 200 de haut. J’y ai placé divers éléments : header, logo, menu, article… dans le but de créer une interface graphique ou tout du moins un morceau. Cette image servira de base pour créer un menu CSS avec onglets graphiques dont le style s’apparente énormément aux sites de style web 2.0 !
Le menu est horizontal, au survol de la souris un onglet orange apparaît derrière le lien actif. Ce tutorial se compose en deux parties : La création du menu graphique sous photoshop (très simple) et la découpe et le codage en CSS.
Le tout est accessible aux débutants, alors n’hésitez pas à tester ce tutoriel !
Ce menu CSS est optimisé pour le web et ne comporte que deux images :
Il ressemble à cela :
Pour le tester en live :
http://www.wks.fr/tutorial_help/tutorial_333/wks_tutorial_css_2.html
LA CREATION GRAPHIQUE
ETAPE 1
Je crée donc une image de 500 sur 200 pixels. Je vais directement remplir l’arrière plan de mon image avec un léger dégradé (foncé en haut plus clair en bas). Vous pouvez voir les styles de calques utilisés dans le fichier psd téléchargeable ci-dessous.
- Fichier source photoshop
- clic pour télécharger le fichier source photoshop utilisé dans ce tutorial
ETAPE 2
Avec l’outil texte je crée mes liens, en état inactif, ceux-ci sont soulignés, colorés en bleu clair, en état actif ils sont non soulignés et colorés en blanc.
ETAPE 3
Je sélectionne l’outil rectangle arrondi des formes personnalisées avec un radius au minimum de 10 pixels. Puis je crée un rectangle derrière le lien actif (celui en blanc).
Pour finir j’ajoute un style de calque (incrustation de dégradé).
ETAPE 4
J’ajoute différents éléments (fictifs pour le moment) pour mettre en situation mon menu.
Terminée, la partie graphique est TRES simple 
passons maintenant au code CSS, vous allez voir c’est presque aussi simple
PROGRAMMATION DU CODE CSS
Je commence par créer mon fichier HTML avec les lignes standards :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>WonkaStudio - Tutorial Webdesign CSS / menu horizontale full CSS</title>
</head>
<body>
</body>
</html>
Ensuite je passe à la déclaration de mes styles CSS, pour cela j’ajoute les lignes ci-dessous entre les balises HEAD de ma page :
<style type="text/css">
/*Credits: WonkaStudio http://www.wks.fr */
/*Tutorial Webdesign */
body {
background-color:#fff;
margin:0;
padding:0;
}
</style>
Je définis ci-dessus des banalités concernant la page, je ne touche pas aux tailles em des mes textes car j’adore travailler en px (c’est pas bien cela
Passons ensuite à la déclaration brute de mon menu, pour cela je vais utiliser les ul li du code HTML, voila ce que cela donne :
<ul class="menu">
<li><a href="#"><b>Accueil</b></a></li>
<li><a href="#"><b>Produits</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Références</b></a></li>
<li><a href="#"><b>Contacter nous</b></a></li>
<li><a href="#"><b>Partenaires</b></a></li>
</ul>
Vous remarquez que chaque libellé Accueil, Produits… se trouve dans une balise lien A href qui lui-même se trouve dans un li qui lui-même se trouve dans un ul qui lui-même est soumis à une classe CSS du nom de menu (pas mal l’explication !).
Nous allons donc définir la classe menu, cependant celle-ci est un peu compliquée, nous allons donc la décomposer en trois étapes :
- Style pour le menu général
- Style pour les liens (boutons)
- Style pour l’état hover.
Style pour le menu général
Il faut définir la taille du menu, son fond et enfin l’aspect général du menu qui est en fait le ul. Pour cela je vais utiliser le code :
.menu {
list-style:none;
width:100%; height:71px;
margin:0;
background: url(background.jpg);
}
Je définis ici la taille de mon menu : il devra ainsi faire 71 px de haut et s’étendre sur toute la largeur de mon écran. Je lui définis également la couleur de fond, ici c’est une image background.jpg !
Et voila pour cette première étape.
Style pour les liens (boutons)
Passons maintenant aux styles de mes boutons, cette étape sera également très facile !
Voici le code à utiliser :
.menu li a {
display:block;
float:left;
height:32px;
line-height:32px;
color:#aaa;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
font-size:14px;
text-decoration:underline;
padding:0 0 0 7px;
cursor:pointer;
}
.menu li a b {
float:left;
display:block;
padding:0 14px 0 7px;
}
Je n’expliquerai pas la classe menu li a qui ne présente aucune difficulté, cependant la classe menu li a b est beaucoup plus intéressante, en effet elle permet de créer le bord arrondi se trouvant sur la droite. La technique du b est utilisée pour pouvoir créer à la volée des boutons de différentes largeurs tout en gardant une et une seule image de fond !
Etudiez bien ce code en premier lieu, il peux paraitre sauvage mais en fait il est très facile et limpide par son bon sens !
C’est pourquoi je passe directement à l’état hover de mes boutons.
Style pour l’état hover
Ah la la, j’ai déjà bientôt terminé mon menu. Je vais donc appliquer l’état hover sur mon bouton, encore une fois rien de compliqué : il faut changer la couleur du texte, enlever le soulignement, et ajouter un fond background.
Voici le code à utiliser :
.menu li a:hover {
color:#fff;
text-decoration:none;
background: url(onglet_hover.jpg);
}
.menu li a:hover b {
background:url(onglet_hover.jpg) no-repeat right top;
}
Vraiment trop facile non ?
Mais oui ! il manque encore quelque chose : l’état current de mon bouton ! Si vous êtes malin vous aurez compris qu’il suffit de copier coller le code ci-dessous en changeant le libellé comme ci-dessous :
.menu li.current a {
color:#fff;
text-decoration:none;
background: url(onglet_hover.jpg);
}
.menu li.current a b {
background:url(onglet_hover.jpg) no-repeat right top;
}
Ne pas oublier d’ajouter la classe sur mon lien dans la balise ul pour que cette nouvelle classe soit prise en compte :
<li class="current"><a href="#"><b>Services</b></a></li>
Maintenant c’est terminé !
Vous pouvez voir en live le résultat de ce tutoriel : http://www.wks.fr/tutorial_help/tutorial_333/wks_tutorial_css_2.html
Pas mal non ?
Bonne chance à tous pour la réalisation de ce menu CSS web 2.0 !
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
Comment résoudre ce problème ?
