32
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 !
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 26 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
21 mai 2008 15:13, par Mofo
Salut wonka !
je viens de faire ton tuto sur le « menu css graphique à onglet 2 » et il y a un problème avec internet explorer 7, il dispose les onglets en cascade !!! je sais bien que IE est tout naz mais comme c’est toujours le navigateur le plus présent des les ordi, c’est très génant. Sinon aucun problème avec safari, opéra, firefox. Et cela m’interressait pour faire un site, si cela ne marche pas avec IE !!! Dis moi si tu as trouvé le problème. A+
Répondre-
-
22 mai 2008 11:07, par Mofo
salut wonka, j’utilise la version ie 7.0.6 mais j’ai ouver ta page du site avec ie et aucun problème pour ton menu en effet ! Donc cela vient de moi et comme je débute en css j’ai un peu de mal
si tu veux bien regarder vite fait sur mon code css, car j’ai forcement merdé quelque part. Merci d’avance, mais je cherche quand même ...
@charset « utf-8 » ;
.menu list-style:none ; width:100% ; height:71px ; margin:0 ; background-image : url(images/fond_bleu_02.gif) ;
.menu li a height:32px ; line-height:32px ; color :#aaa ; text-decoration:none ; font-family:Arial, Helvetica, sans-serif ; font-size:14px ; text-decoration:none ; float : left ; font-weight : bold ; text-align : center ; margin-right : 15px ; width : 101px ; padding : 0 ; display : block ; cursor : pointer ;
.menu li a b float:left ; display:block ; padding-top : 0 ; padding-right : 14px ; padding-bottom : 0 ; padding-left : 7px ;
.menu li a:hover color :#fff ; text-decoration:none ; background-image : url(images/onglet_orange_02.gif) ; background-repeat : no-repeat ;
.menu li a:hover b background-image : url(images/onglet_orange_02.gif) ; background-repeat : no-repeat ; background-position : right top ;
.menu li.current a color :#fff ; text-decoration:none ; background-image : url(images/onglet_orange_02.gif) ; background-repeat : no-repeat ;
.menu li.current a b background-image : url(images/onglet_orange_02.gif) ; background-repeat : no-repeat ; background-position : right top ;
Répondre-
24 mai 2008 18:27, par Renaud
Il suffit de rajouter line-height:0px ; margin:0px ; padding:0px ; dans (.menu) Je ne suis pas certain du résultat mais cela coute rien d’essayer.
Répondre
-
-
-
-
15 juillet 2008 12:13, par ThVi
Merci pour l’astuce de l’onglet extensible. C’est un tuto simple et clair. Continuez dans ce sens.
Répondre-
20 août 2008 10:11, par oxyde
Vraiment sympa comme tutoriel !
Petite question cependant , il suffit donc de créer un onglet d’une certaine taille pour qu’il s’adapte automatiquement en background avec une taille inférieur par exemple ? Ou faut-il faire différentes tailles à chaque fois ?
Répondre-
30 octobre 2008 22:11, par atlasdesign
slt wonka chui débutante Css c acile a comprondre vue ta façon d’éxpliquer mérci bcp j’att + d’éxércice
Voir en ligne : débutante
Répondre-
8 décembre 2008 07:41, par Asti
Hello Wonka, Je voulais savoir si ton site était un mélange de PHP/CSS ?? Si oui commment fais tu pour incorporer les 2 ensemble ?? Merci d’avance
Répondre-
8 décembre 2008 11:20, par Wonka
Bah WKS tourne autour d’un CMS spip donc je touche pas vraiment au PHP, quand au CSS il est comme il est bien au chaud dans sa feuille de style
Répondre-
8 décembre 2008 19:33, par Asti
Hello Wonka !! Je voulais savoir une petite chose concernant ton site ! Réalises tu le en language css/PHP ?? Si oui comment fais tu pour mélanger les 2 ??
Merci d’avance
Répondre-
10 décembre 2008 07:36, par Asti
Merci beaucoup pour ta réponse
Répondre et désolé du double post !!-
14 décembre 2008 16:35, par Asti
Pourrais tu nous faire un ptit tuto sur spip stp ?? J’ai déjà crée mon site en CSS/xhtml mais j’aimerais ajouter des système de gestion de news ! Merci
Répondre-
15 décembre 2008 14:52, par Wonka
J’aimerais beaucoup faire cela, mais ce site a un but d’apprentissage du design et non de la programmation, du coup je vais éviter de m’eparpiller sur des sujets que je ne pourrais tenir à la longue ! Désolé.
Répondre-
17 décembre 2008 13:05, par Asti
ok je comprends parfaitement ton idée.. Par contre connaitais-tu des sites axpliquants le début avec spip ?? comment gérer des news, commentaires etc...
Est il possible d’adapter spip sur une page html déjà crée ??
Merci d’avance
Répondre-
18 décembre 2008 09:46, par Wonka
Le site spip officiel est pas mal car il explique chaque page en détail et l’utilisation de chaque boucle. Et oui on peut adapter un spip sur une template existante
Répondre Regarde wks, c’est un bonne exemple !-
18 décembre 2008 19:20, par Asti
Ouai, c’est sur que ton site est très beau visuellement !! J’essais de retrouver un peu les balises utilisées sur ton site
Va falloir que je regarde plus attentivement spip..
Je te montre juste mon site en impr ecr.
Penses tu que je peux adapter spip pour un site comme le mien ??
Sachant qu’il ne prends pas toute la taille de l’écran et que j’ai utlisé pas mal de div..http://img410.imageshack.us/img410/8884/image1lo4.png
Répondre-
22 décembre 2008 10:22, par Asti
Juste une petite question après je t’embête plus.^^ J’ai inséré ma feuille de style css dans mon squelette mais les images en backgroud n’apparaissent pas
Répondre
Comment résoudre ce problème ?
-
-
-
-
-
-
-
-
-
-
-
-
-
13 janvier 2009 21:59
Bonjour,
Merci pour ce tuto sa marche parfaitement, mais j’aurais une question je voudrais que les différents onglet soit au milieu de la page a l’horizontal je trouve ca plus jolie merci d’avance de ta réponse.
A+
Répondre-
15 janvier 2009 18:03, par Wonka
Il faut créer une marge de gauche pour pousser les boutons vers le milieu. Je pense que c’est la méthode la plus simple !
Répondre-
19 janvier 2009 00:22
Pour mettre le menu au milieu sa marchera mais que sur l’écran où on ce trouve car sinon si on prend un écran avec un plus grande résolution le menu ne sera pas au milieu. Donc je ne sais pas comment faire. Pouvez vous m’aider s’il vous plait merci.
Répondre
-
-
-
30 avril 2009 21:43, par Oli
magninfique, merci comme tout le reste sur ton site ;
et sans abuser peux tu me donner une piste pour faire un sous menu (une arborescence)... ! ce serait le top !
Répondre -
22 octobre 2009 14:29, par Cora-liie
bonjour bonjour !!
voila je suis justement en train d’essayer de faire ce menu mais je n’y arrive pas... je loupe certainement une étape mais moi tout reste sans que l’on mette le moindre CSS...
merci d’avance !! (c’est pas mal du tout ce que tu fais !!^^)
Répondre -
4 janvier 2010 17:36, par Votre pseudonyme
Bonne année ! Et merci pour cette article
Répondre Bonne continuation
