32
Créer un menu CSS graphique à onglet
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 onglet graphique !
Le menu est horizontal, au survol de la souris un onglet bleu apparait derrière le lien actif. Ce tutorial se compose de deux parties : La création du menu graphique sous photoshop (très simple), puis la découpe et le codage en CSS.
Le tout est accessible aux débutants, alors n’hésitez pas à tester ce tutoriel !
Vous pouvez aller sur cette page pour vous rendre compte du résultat final : http://www.wks.fr/tutorial_help/tutorial_304/wks_tutorial_css_2.html
LA CREATION GRAPHIQUE
ETAPE 1
Je crée un nouveau document, je remplis le fond de blanc avec le pot de peinture ou d’un dégradé de gris clair vers blanc (haut vers bas). Puis avec l’outil texte je crée mes liens sur une seule ligne.
ETAPE 2
Je crée un nouveau calque et sous mes titres (avec l’outil sélection) je crée un grand rectangle bleu foncé et juste au dessus (en passant une ligne blanche) une ligne de 5 pixels de haut en bleu clair.
Voici le code RVB des couleurs utilisées :
- Bleu clair : 93 190 245
- Bleu foncé : 43 87 112
ETAPE 4
Avec l’outil des formes personnalisées je crée un rectangle arrondi en dessous de l’un de mes liens, j’y ajoute un style de calque : calque > style de calque > incrustation de dégradé. Et je sélectionne un bleu clair vers bleu très clair.
- Bleu clair : 93 190 245
- Bleu très clair : 163 215 245
ETAPE 5 : un peu compliqué pour les débutants !
Je crée un nouveau calque que je place juste au dessus de mon onglet. Je récupère la sélection de mon onglet puis je vais dans le menu sélection > modifier > contracter > 1 pixel.
Je remplis de blanc avec le pot de peinture cette sélection puis je refais menu sélection > modifier > contracter > 1 pixel et enfin j’appuie sur la touche suppr.
Pour terminer, je place un masque de fusion : calque > masque de fusion > tout faire apparaitre. Et avec un dégradé je camoufle le bas de ma bordure blanche.
ETAPE 6
Je change la couleur du lien sur l’onglet actif en blanc.
ETAPE 7
Ensuite je peux agrémenter mon menu de contenus fictifs histoire de le mettre en situation.
LA DECOUPE DE MON MENU
Pour ce menu, la découpe sera vite faite je n’ai besoin que de l’onglet bleu, le reste va se faire avec CSS !
Dans Photoshop (j’aplatis mon image : calque > aplatir l’image) je sélectionne l’onglet bleu et seulement l’onglet bleu. Puis je fais ctrl + c et ctrl + n et ctrl + v. Et « j’enregistre sous » cette image, normalement vous obtenez quelque chose comme ci-dessous.
LE SCRIPT CSS DE MON MENU
Je commence par définir le code d’une page html standard, puis j’ajoute ma liste ul li qui définit mon menu :
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Références</a></li>
<li><a href="#">Contacter nous</a></li>
<li><a href="#">Partenaires</a></li>
</ul>
Je remarque que j’ai ajouté une classe menu à ma balise ul dans mes styles situés dans le head de ma page, j’ajoute mes premiers styles : le body pour le style général de la page ainsi que la classe menu qui entamera les hostilités stylistiques pour mon futur menu 
<style type="text/css">
/*Credits: WonkaStudio http://www.wks.fr */
/*Tutorial Webdesign */
body {
background-color:#fff;
margin:0;
padding:0;
}
.menu {
list-style:none;
border-bottom:#5dbef5 solid 5px;
background-color:#ffffff;
width:100%; height:45px;
margin:0px;
}
</style>
J’ajoute ensuite un style sur les balises li de ma classe menu
.menu li { float:left; }
Ce qui me permet d’aligner mes liens.
Puis j’ajoute les styles sur les balises a contenus dans les li contenus dans la classe menu. Pour cela j’ajoute :
.menu li a {
display:block;
color:#000000;
font-size:10px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
margin-right:50px;
cursor:pointer;
}
Ce code me permet d’entamer la personnalisation des liens de mon menu, je vais sûrement avoir à changer quelques options, car il faut qu’il s’adapte parfaitement à l’état hover, ce que nous allons voir tout de suite !
Pour que mes boutons s’adapte en largeur, quelque soit la taille en largeur de mes liens, je vais utiliser une petite astuce en ajoutant les balises b sur mes liens.
Voici ma balise menu complète avec le style a, le style b, le style a et b hover et le style général du menu :
.menu {
list-style:none;
border-bottom:#5dbef5 solid 5px;
background-color:#ffffff;
width:100%; height:27px;
line-height:27px;
margin:10px 0 0 0;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a {
display:block;
float:left;
height:27px;
line-height:27px;
color:#aaa;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
font-size:11px;
padding:0 0 0 7px;
cursor:pointer;
}
.menu li a b {
float:left;
display:block;
padding:0 14px 0 7px;
}
.menu li a:hover {
color:#fff;
background: url(tuto_304_onglet.jpg);
}
.menu li a:hover b {
background:url(tuto_304_onglet.jpg)
no-repeat right top;
}
Je vous conseille d’étudier minutieusement ce code pour comprendre le chevauchement de l’image onglet qui permet de créer l’arrondi de gauche et de droite une vrai petite astuce à utiliser le plus souvent !
Cependant je remarque qu’il y a un problème sur mes onglets bleus, oui un petit décalage vers le milieu. Evidemment, notre image est trop petite, il va falloir la modifier pour la rendre plus large ! J’ouvre donc mon fichier jpg onglet sous photoshop.
Dans le menu édition > dimension de la zone de travail > j’augmente sa largeur pour obtenir 200 voir 250 pixels et ensuite avec le « copier/coller » j’étire mon onglet.
J’enregistre mon fichier sous le même nom que le petit onglet et je retourne sur ma page html ; Je remarque que le problème de décalage à disparu, magique non
C’est bien beau tout ça ! Mais ne pourrait-on pas faire un état actif sur mon menu, histoire de se repérer ? Est bien oui je vais créer une nouvelle classe current qui servira d’état actif à mes liens.
Comme ce tutoriel se fait déjà long je ne vais pas me compliquer la vie, je vais utiliser la même image que mon état hover, sinon j’aurais utiliser une autre couleur par exemple.
J’ajoute donc cette classe dans mon code css :
.menu li.current a {
color:#fff;
background:url(tuto_304_onglet2.jpg);
}
.menu li.current a b {
background:url(tuto_304_onglet2.jpg) no-repeat right top;
}
Et je n’oublie pas de l’appeler dans ma balise li comme cela :
<li class="current"><a href="#"><b>Services</b></a></li>
Et voila, je peux enfin admirer mon menu, tout beau tout neuf, voici ce que cela donne en version complète html / CSS.
Vous pouvez aller sur cette page pour vous rendre compte du résultat final : http://www.wks.fr/tutorial_help/tutorial_304/wks_tutorial_css_2.html
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 30 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.
-
-
17 avril 2008 12:19, par Wonka
Quel est ton problème ? Car tu devrais y arriver il n’y a pas d’élément très compliqué !
Répondre
-
-
18 avril 2008 08:37
you oouuuuuuuuu
merci wonka c’est mon prochain design
le 3eme celui la
comme j’ai dit ca serait un multi design
je met a mes favoris
Répondre -
10 mai 2008 15:44, par xdiz
J’apporte une petite rectification a ce super tuto : « Dans le menu édition > dimension de la zone de travail > »
C’est dans le menu Image > Taille de la zone de travail !
;) Encore merci pour tes tutos WKS !
Répondre -
13 juillet 2008 16:03, par stefff
Bonjour,
Sympa comme tutoriel...
Il me semble qu’il y a une erreur à l’étape 5. Si je dilate 2 fois de 1 pixel et je fini par supprimer, le calque ne sert à rien puisqu’à la fin il est vide.
Stefff
Répondre-
13 juillet 2008 16:28, par Wonka
C’est contracter en fait, j’ai du fumer la moquette le jour ou j’ai rédigé l’étape 5 !
Répondre
-
-
29 juillet 2008 22:59, par Alexx13
Bonjour, Super ce tuto, merci, par contre je bloque sur le code, mon image est coupée, quelqu’un pourrait venir à mon aide ?
Répondre-
1er août 2008 12:22, par Snorky
Bonjour, je suis dans le même cas.
J’ai utilisé la même image que le tuto (250x27).
Quelqu’un a une idée ?
Répondre
-
-
12 août 2008 02:41
bonjour, comme tous le monde le dit ce tuto est vraiment superbe. j’ai tous réussi sauf l’étape 4, quand il est dit : " Avec l’outil des formes personnalisées je crée un rectangle arrondi en dessous de l’un de mes liens ET étape 5 rien compris aussi
Répondre-
12 août 2008 19:59, par Wonka
Pourtant il y a rien de très compliqué, pose tes questions je pourrais surement te venir en aide
Répondre-
28 août 2008 13:35, par BlackAlex
je bloque un peu sur le css vu que moi j’utilise du css externe mais je voulais savoir est-ce que ça serait possible d’avoir le code en entier ?
Répondre
-
-
-
14 septembre 2008 14:36
Je ne trouve pas ce tutorial spécialement adapté aux débutants, en faite il faut un minimum de connaissance pour l’utiliser, car moi j’arriverais pas a faire sa en 5 minutes sans avoir a chercher 50 fois ce que signifie tel ou tel chose et ou la trouver, sur quoi cliquer etc etc... Bref on ne part pas à partir de zéro, c’est dommage ^^ il pourrait être un peu plus construit. Pour ma part je n’y suis pas arrivé.
Répondre-
30 septembre 2008 21:50
bonjour est t il possible davoir le code complet moi je bloque au moment ou tu decoupe tu explique pas le type de decoupe a faire ? puis comment les images vont devenir les menu...
Répondre -
28 avril 2009 17:23, par Votre pseudonyme
Bonjour,
Moi aussi je suis tout à fait d’accord avec toi. Je suis bloquée à partir de l’étape 4 de création. Est-ce-possible de donner plus de détails à partir de « créer un calque au dessus du lien » ? merci beaucoup
Répondre
-
-
4 octobre 2008 13:34, par jean
Magnifique tuto ! Petite question,est il possible de le faire en menu vertical ?
Répondre -
5 octobre 2008 10:05, par Julien
Bonjour, Je suis fan moi aussi mais j’ai un petit problème... mes petit onglets ne se chevauche pas... d’ou cela provient-il ? j’ai du raté quelque chose mais je vois pas ou ! voir le resultat
Répondre -
11 octobre 2008 23:14, par kom1dune
Bonjour,
Joli tutorial ! Sympa à faire... Je me suis amusée à mélanger plusieurs effets de tutos différents. J’ai tout de même un petit problème (mais je ne sais pas si c’est dû à mon Photoshop ou au tuto) : Mes polices ont une drôle de tête - quelque soit la police utilisée d’ailleurs - comme si un des calques en dégradé les faisait se contracter... Bizarre donc. Et L’importation du logo (qui est très lisible sous Illustrator ou en psd) a le même problème.
Autre problème : la découpe du menu. Si j’applatis l’image je récupère l’onglet avec le texte. Si je sélectionne avant l’applatissement, quand je colle dans un nouveau document, l’onglet devient blanc... Bizarre encore...
Si quelqu’un a des réponses à mes 2 questions ce serait sympa. Merci d’avance.
Je n’ai pas encore essayé le code CSS j’y connais pas grand chose en code
faut déjà que je le comprenne, mais je vais m’y mettre...(Au passage, merci pour la jolie image de maison que j’ai piqué dans le kit « Blue Home »).
Répondre -
7 avril 2009 01:43
je sais pas pour vous mais je crois que les images des onglets ne s’affichent pas sur Internet Explorer à par pour la version 8 (j’ai fait le teste de la version 5.5 à 7)
Répondre-
7 avril 2009 08:40, par Wonka
Non ca marche très bien chez moi, je viens de tester sous IE 7 !
Répondre
-
-
25 octobre 2009 11:29, par valou78
a partir de l’etape 5 je rame il faudrait plus de detail voir des capture d’ecran de photoshop Merci tuto sinon bien
Répondre -
19 février 2010 00:31, par YasserFlasher
Je kif à fond ce superbe site et merci pour le tutoriel ça ma énormément aidé ....
Répondre -
26 septembre 2010 22:11, par Votre pseudonyme
salut merci pour ces tuto super bien fait quoi que pas extremement detailler pour les novice comme moi
Répondre j’ai un probleme dans l’etape 4 quand je cree le rectangle arondie sur l’onglet accueil de mon menu l’onglet accueil est cacher deriere la figure et donc elle reste invisible j’ai eseiller de reduire l’opasiter mais sa ne corespond pas au but rechercher comment faire pour metre en avant un calque plutot qu’un autre c’est a dire lorsque j’ai un calque menu et un calque figure comment faire pour que le calque figure soi en second plan et ne cache pas le claque menu ...
merci bien j’espere avoir eter asser claire -
15 mai 2011 15:57, par Dédé
Salut, petite question à propos du résultat final : en naviguant sur la page http://www.wks.fr/tutorial_help/tutorial_304/wks_tutorial_css_2.html, je me retrouve avec une barre horizontale comme quand il y a trop de chose sur la page et qu’on peut la faire défiler sauf qu’ici, il n’y a rien à faire défiler ! Et impossible de supprimer cette barre inutile (mais qui fonctionne pour défiler vers du vide !!!). Pour info, le problème arrive sur firefox et aussi sur ie.
Répondre
