Tutoriel vidéo xHTML-CSS : Menu déroulant en CSS

McClane (Lundi 24 Novembre 2008 à 14:01):

Merci pour ce tutoriel tout en image !

A.ryan (Lundi 24 Novembre 2008 à 15:43):

Merci bien, je ne connaissais ça qu'en javascript

tginja (Lundi 24 Novembre 2008 à 19:07):

Merci j'ai longtemps cherché des tutos pour réaliser ces menus donc ça me fait très plaisir car les tiens sont beaucoup plus compréhensible

Lefoudusucre (Lundi 24 Novembre 2008 à 21:53):

C'est vraiment genial, tout tes tutos sont supers et comprehensibles et un nouveau design du site qui dechire...
Je viens d'utiliser ce tuto et maintenant je m'en sers pour mon site merci beaucoup (j'ai changer des trucs t'inquiete ^^)

JLou (Lundi 24 Novembre 2008 à 23:13):

Super tuto. Bien expliqué, mais à la fin, j'aurai plutôt utilisé un z-index pour faire passer le menu par dessus le corps de la page. Question de clarté ^^. J'avais déjà vu l'astuce, mais sans m'attarder, là plus de questions à se poser :p

A.ryan (Lundi 24 Novembre 2008 à 23:17):

Et peut-être un margin-top pour le texte.

Mika (Mardi 25 Novembre 2008 à 12:00):

Super tuto.

Juste un petit truc pour qu'il soit nickel. A la fin, tu as mis #menu{ position: abolute; }
Je crois qu'il manque un s ;-)


Sinon trés bon niveau que ce soit pour ce tuto ou le site/blog dans l'ensemble.

thvi (Mercredi 26 Novembre 2008 à 14:01):

Bonjour,

Toujours aussi efficace quant à la compréhension des tutos réalisés.

Je trouve bien pratique la fonction de fermeture automatique des balises HTML. Comment l'activer sur Notepad++ ?

Bonne continuation

blouh* (Mercredi 26 Novembre 2008 à 16:21):

Merci Raton... euh Grafikart, d'être là pour nous =).

ST.PhotoGraphiste (Jeudi 27 Novembre 2008 à 07:43):

Merci, c'est exactement le tuto qui me faut et un grand bravo pour le
nouveaux Design (Mr Raton à grandit ;-)
Un grand merci Grafikart.

Harry (Vendredi 28 Novembre 2008 à 20:33):

J'adore ton site, que dire de plus ? De bonne astuce, un tuto sur un espace membre ferait découvrir le SQL peut être ^^
Bravo pour ton site !
Harry

John11400 (Vendredi 28 Novembre 2008 à 21:55):

J'ai essayé de mettre en pratique ce tuto mais ca ne marche pas.

Dj W@rM@n (Dimanche 30 Novembre 2008 à 00:03):

Bonjour!

Merci pour ce super tuto encore une fois mais à quand la vidéo téléchargeable? Viittte.

Dj W@rM@n (Dimanche 30 Novembre 2008 à 12:37):

Bonjour,

Tu ne mets pas en ligne tes fichiers? Car c'est bien d'avoir une idée des dimensions utilisées.

Merci pour la vidéo!

Dj W@rM@n (Dimanche 30 Novembre 2008 à 18:20):

Oui d'accord, je comprends très bien mais pour la taille des images par exemple. Car la bande supérieure créée par les menus ne va pas jusqu'aux bords de ma page.

Nesta (Mercredi 03 Décembre 2008 à 10:13):

Effectivement, c'est plutôt pas mal de pouvoir télécharger l'exemple pour modifier nos petites erreurs ...
Certains vont surement en abusé, mais il faut penser aux autres qui essayent tant bien que mal de faire d'eux même le projet ^^

Merci pour ce tuto en tout cas

brochetta (Vendredi 05 Décembre 2008 à 17:15):

comme la dit thvi on fait comment pour activer la fermeture automatique de balise ?

blouh (Samedi 06 Décembre 2008 à 01:40):

Je cherche, mais impossible de retrouver le nom de l'éditeur pour coder sous mac que tu m'avais dit...
si tu peux me donner le nom par mail.
Thx

Mih.o2 (Samedi 13 Décembre 2008 à 07:37):

Bonjour, je lisais les commentaires et je pensais que vous pouriez laissez les sources des tuto' mais en mettant des copyright sur vos images.. Ca serait simpa car j'ai pas le courage de tout recopié

a bientot

foued (Mercredi 17 Décembre 2008 à 22:54):

Une bonne idée de ne pas mettre les fichiers source, comme ça ils apprennent mieux en retapant les codes,

Thibault (Lundi 22 Décembre 2008 à 00:15):

Salut,

Merci pour ce tuto si parfait ! Pour ce qui est du problème avec IE, la seule solution mieux que j'ai trouvé, c'est de ne pas donner de hauteur à la liste qui déroule... Ca marche très bien. Par contre pas le choix de la hauteur

Bonne nuit !

Communauté informatique (Lundi 22 Décembre 2008 à 17:01):

Super tutoriel ! Merci beaucoup ! Dommage qu'une version HTML n'existe pas, je préfère aux vidéos... Mais bon, je vais pas me plaindre étant donné que ce tutoriel est super :D

Gcyrillus (Lundi 29 Décembre 2008 à 23:02):

Bonjour

Tutoriel sympas et clair , il a vraiment l'avantage d'etre a la portée des débutants .

L'héritage est le principe de base de la mise en forme , bien qu'il ne soit pas toujours aisée de tout apprécier dans sa globalité , il est bon de l'avoir a l'esprit (un text-align:center sur body et tout les éléments de la page hériterons de cette valeur par défaut).

Pour les problémes de largeur de lien , il suffit de faire hériter en cascade les largeurs du parents .
ex: dl {width:150px;}
dt , dd , ul , li , a {display:block;width:100%;margin:0;padding:0;text-align:center;}
dl fait 150px -> dt et dd 100% de dl -> ul 100% de dd -> li 100% de ul et enfin a 100% de li .
Si la chaine se casse (ex li sans width ) , pour <a> se sera 100% de rien , plus aucunes valeurs a appliquées.

Le display:block; ecrase le display:list-item;(par defaut) des li et elimine les puces .(a l'inverse on peut coller une puce a un élément quelconque (titre , paragraphe , lien , etc ... en lui attribuant un display:list-item;)

les marges internes et externes sont remises a zéro sur l'ensemble des élements et les textes sont centré .

Dans IE , les li et a si elles sont doté d'une largeur (et display:block) ne devraient plus avoir de marges inférieurs indésirable (défaut de layout ,caractéristique de IE)

Le résultat de cette demo en ligne serait appréciable pour les faux débutant (136 mo contre quelques KO , y' a pas photos pour les p'tites connexions ) et permettrait éventuellement de mettre en évidence et corriger d'éventuelles bugs ou erreur typographiques
Dans le tuto je vois : position:abolute; -> erreur de typo , c'est absolute (avec le s)
Tester dans FF et IE7 dans le tutoriel, cette erreur passe inaperçue car la hauteur du conteneur parent est fixé a 40px , il ne s'etire donc pas et ne repousse rien (a se demander finalement si le positionnement absolu est nécessaire a part pour une rétro compatibilité avec des vieux navigateurs !? )

Bonnes fêtes

naise (Mardi 06 Janvier 2009 à 20:56):

merci !putain de merde comment je suis heureux d'être tombé sur se lien hyper "wicked". Dieux existe est je pense qu'il fait des tutos en vidéo sur le net! Je vous chope la vidéo et je vais faire sa tranquillement.

Holoubaloo (Mercredi 07 Janvier 2009 à 09:43):

Tuto très intéressant en effet mais qui ne marche pas sous IE...6.
Une solution ? Car malgré le fait que peu de personne utilise encore cette version du navigateur on ne peut tout de même pas les ignorer.

naise (Mercredi 07 Janvier 2009 à 13:17):

j ai fait le tutos est ca donne sa:
http://www.transphotographiques.com/include/menu-2009/menu.html

pour le site on fait un import en java mais sous IE les block ne se déroule pas !Une solution?

Thibault (Jeudi 08 Janvier 2009 à 19:09):

@ Naise : Ton menu fonctionne très bien sur FIrefox, IE 6 et IE 7 !

Encore merci pour ces tutos !

Skydoo (Dimanche 18 Janvier 2009 à 03:21):

Bonsoir (ou plutôt bonjour )

Merci pour cet excellent tuto, très bien détaillé. Tu expliques tout, et on comprend très bien.
Par contre moi j'ai encore un problème sur IE7. Tout marche bien, jusqu'à ce qu'on fasse :

dl dd
{
display: none;
}

dl:hover dd
{
display: block;
}

Sous FF ça marche il n'y a pas de soucis, mais sur IE7 mes menus ne s'ouvrent pas lorsque j'y passe dessus. J'ai essayé quelques modifications dans le css mais rien à faire, ça ne marche pas.
Si quelqu'un a eu le même problème et a trouvé la solution, je suis prenant :D

En tout cas encore merci pour ce tuto ++

Krys Toff (Vendredi 30 Janvier 2009 à 17:12):

Super tutoriel, j'ai appris des trucs utiles, merci. ^_^

Plutôt que l'astuce d'une bordure en bas de couleur identique au fond du menu suite au problème d'IE, est-ce qu'une bordure haut et bas et un "border-collapse: collapse" ne fonctionnerait pas ? J'avoue ne pas avoir essayé cette propriété sur autre chose qu'un tableau, faudra que je teste ça ce week-end.

Pour répondre à Skydoo et Naise, la propriété "hover" ne s'applique que sur les liens directement dans les anciennes versions d'IE, le problème vient de là.

Il faudra alors utiliser un pseudo-commentaire et mettre une fonction javascript à la place :
<!--[if IE]>
mettre ici le programme javascript ou le lien vers le fichier .js correspondant
<![endif]-->

Les autres navigateurs (ceux qu'il est conseillé d'utiliser, comme FireFox par exemple) considèreront cette partie comme un commentaire mais IE appliquera les infos situées dans ce pseudo-commentaire.
A mon avis, il faudra aussi créer un fichier css spécifique pour IE (appelé par un pseudo-commentaire de la même façon dans le header de la page html) en remplaçant le "hover" par le nom de la fonction javascript pour les sous-menus.

Romroyce (Dimanche 01 Février 2009 à 23:17):

Salut,

Ce tuto CSS est génial comme le reste de vos tutos. Je m'entraine dessus pour créer un menu déroulant.
Sous IE j'ai eu le même problème et c'est très embêtant.
Cependant je crois avoir trouvé une solution. Ce qu'il faut faire c'est ABSOLUMENT imposer un background dans le
#menu dd ul li a{background:######;} et enlever toute les marges sur #menu dd ul{margin:0;padding:0;}
et #menu dd ul li{margin:0;padding:0;}.

Voilà pour moi ça fonctionne, faites moi savoir si ça fonctionne pour vous...
Encore merci.

dolfant (Samedi 21 Février 2009 à 16:11):

Super tuto !
Pour le reste Romroyce a raison, imposer un background règle le problème sur IE.

Mixus (Mardi 24 Février 2009 à 03:35):

Merci RomRoyce,

En effet ajouter un background sur les dd ul li a fait fonctionner le tout.
Sans même changer les marges.

Mais surtout merci pour le tuto, et si il faut prendre le temps de le taper,
et bien ça vaut le coup.
Mille merci encore

Najnouj (Mardi 24 Février 2009 à 14:13):

Merci pour ce tuto c'est vraiment bien expliqué.
J'aimerai bien savoir comment je fais pour rendre ce menu verticale avec un petit flèche à droite pour les sous-menu .
merci encore et bonne journée.

Mixus (Mardi 24 Février 2009 à 22:32):

@ Najnouj pour le rendre vertical je ne sais pas.
Mais pour avoir une petite flèche regarde du côté
de la propriété line-style dans les définitions dl ul de
la feuille de style.
Pour ceux qui sont intéressés, en retirant l'id menu
et en remplacant par des couleur de fond 'background'
j'ai résolu tout les problèmes de compatibilité avec IE6.
Je me suis même offert de centrer le tout en l'incluant dans une table.

Mixus (Vendredi 27 Février 2009 à 03:06):

Pour la verticalité, il faut regarder du côté du paramètre float left.
Bonne chance
Et je rajoute encore un big MERCI à Grafikart pour ce tuto.

Archange07 (Mercredi 11 Mars 2009 à 10:45):

Bravo pour le tutoriel, c'est très bien expliqué.
Par contre, j'aurais aimé savoir avec précision comment centrer le menu...
Merci d'avance pour ceux qui répondront !

darkavatars (Vendredi 13 Mars 2009 à 17:42):

Bonjour je une question apres comment le metre ou on veux?

lifywar (Mercredi 01 Avril 2009 à 20:35):

vous tutos sont vraiment malade!!!

par contre lorsque c'est applicable vous devriez mettre l'exemple sur la page un peu en bas du vidéo disons comme sa on pourrais visionnez rapidement le résultat final

continuer bon bon travail

Djiins (Jeudi 02 Avril 2009 à 22:59):

Love ce tuto j'ai réussi a l'adapter a mon futur site qui est en construction et je pense l'adapter en vertical prochainement pour d'autre menu

Bravo

multras (Mercredi 15 Avril 2009 à 13:48):

Merci bcp pour ce tuto, mais toujours il y a des problèmes avec IE6 ... pas seulement dans ce tuto de menu déroulant mais dans tous les autres tuto de CSS

Merci pour l'effort quand même, ça ma trop simplifier l'astuce

GEGE17 (Mardi 28 Avril 2009 à 22:49):

Merci, grâce à ce site, j'apprends !!

Angelmyheart (Jeudi 30 Avril 2009 à 00:50):

Merci infiniment pour ce super tuto vidéo et sans javascript svp donc vraiment parfait :-)
Et aussi un grand merci à Romroyce qui m'a permis ENFIN de régler mon problème sur IE.

GEGE17 (Vendredi 01 Mai 2009 à 14:37):

Merci à Romroyce, grâce à toi ça fonctionne sous IE. T'es un chef, Bravo !!

Dimix (Dimanche 03 Mai 2009 à 17:04):

Super tuto comme d'abitute merci
j'ai appris pas mal de chosses

Gabrielle (Mercredi 06 Mai 2009 à 11:59):

Salut à tous.

Je viens d'appliquer ce tutoriel que j'ai suivi à la lettre pour commencer. Mais, sous Internet explorer, j'ai uniquement les <dt> qui s'affichent, et rien d'autre.

Quelqu'un pourrait-il me donner une solution?

Merci.

Gabrielle (Mercredi 06 Mai 2009 à 12:14):

RE:

J'ai bien appliquer les paramètres que vous conseillaient tous mais ça ne marche toujours pas pour moi.
Quelqu'un peut-il m'aider?

Merci.

darkdog (Samedi 09 Mai 2009 à 20:18):

slt

je suis un débutant dans la programmation et je voulais savoir comment on fait pour déplacer la barre de menu ou on le shouaite ( par exemple a gauche ou au centre etc...)
si quelqu'un peut m'aider merci !

A+

coda (Mardi 19 Mai 2009 à 11:49):

salut,

concernant le probleme du menu qui se retrouve sous le texte (à la fin du tuto) plutot que creer un conteneur en relatif , c pas possible de jouer sur le z-index de la div menu pour la mettre au dessus du texte (donc o 1er plan) ??

ricos21 (Mardi 16 Juin 2009 à 07:36):

bonjour bravo pour le tuto une question quel est la taille des images que tu utilise
Merci ...

Fredericque (Lundi 22 Juin 2009 à 01:08):

Bonjour,

Merci beaucoup pour ce menu. Il marche à merveille sous FF, mais pour moi il ne marche pas sous IE7 (avec une config XP pro). J'ai eut beau changer les éléments comme indiqué pour rectifier les erreurs, mais le menu ne veut pas se dérouler une fois sur deux, et comme j'ai une liste assez longue en sous-menu pour un menu, je n'arrive même pas à atteindre le 4ème titre du sous-menu... (le menu s'efface toujours avant, même quand il veut bien se dérouler). Du coup, je ne pourrais pas utiliser le tuto, mais j'ai pu apprendre des choses

S'il y en a qui sont dessus et qui ont trouvé comment contourner le pb avec IE7, ce serait super de le mettre

roropich (Samedi 11 Juillet 2009 à 19:31):

Bonjour,
Comme quoi il y a des personnes qui sont très pédagogue, et je vous suis reconnaissant de l'être autant.
En fait c'est très simple quand c'est bien expliqué.

Merci de votre professionnalisme
Rodolphe

Quent1du58 (Dimanche 26 Juillet 2009 à 04:26):

Et en mettant 0px? Car c'est toujours existant mais pas visible. C'est à essayer.

Aikidolivier (Vendredi 14 Août 2009 à 14:07):

Bonjour à tous,
pour répondre à thvi et brochetta, la fermeture automatique des balises se gère dans le menu TextFX --> TextFX Setting --> Autoclose XHTML/XML tag.

Gillale (Lundi 17 Août 2009 à 15:35):

Bonjour et un très grand merci à grafikart pour cette aide précieuse et ces tutos. Le web comme on l'aime.
J'ai crée une page en local avec ce tuto en l'adaptant bien entendu à mes contraintes. La page est belle et fonctionne nickel sous Firefox mais sous IE7, rien à faire même avec le background imposé comme Romroyce l'a proposé et qui semble bien fonctionner chez d'autres.
J'en appelle donc à la communauté : qui est volontaire pour jeter un œil à mon css pour tenter de faire apparaitre mon menu déroulant sous IE.

mowmow (Lundi 17 Août 2009 à 15:58):

Merci pour ce tutoriel, je m'en suis servi comme base, j'avais des problèmes par la suite au niveau de la validation w3c par rapport à certaines choses que je voulais intégrer dans mon menu. Le problème provenant de la structure même de celui-ci.

J'ai donc suivi la même méthode pour arriver au même résultat en utilisant uniquement des div au lieu des dl dt et dd. J'arrive à une solution parfaitement fonctionnelle sur tous les navigateurs et conforme au w3c et comportant 20 lignes de css en moins.

Un grand merci tout de même pour m'avoir permis de réaliser ce type de menu sans avoir recours au javascript, chose que je cherchais depuis longtemps. Bonne continuation.

ishak2n (Lundi 17 Août 2009 à 17:45):

merci bcp pour la formation

kakolak07 (Mardi 08 Septembre 2009 à 00:36):

Bonsoir
Je vous remercie pour ce tuto ça ma beaucoup aidé étant donné que je n'ai pas assez de connaissance c'est un bon entrainement.
Cependant j'ai encore quelques problèmes au niveau des sous menus j'ai du texte qui est trop long donc ça ne rentre pas je ne sais quoi si vous avez une astuce .
L'autre souci c'est que je veux que lorsque je vais sur un des menus je veux qu'il y est une couleur différentes qui s'affiche j'ai essayé de modifier mais ça ne marche pas .
Est ce que vous pouvez m'aider ?
Je vous remercie d'avance
A bientôt

mstarback (Mardi 08 Septembre 2009 à 15:21):

Juste : franchement le raton j'adore tes tutos et ils m'ont fait progresser 100 fois plus que mes 2 années de DUT SRC. Cependant je comprends pas le principe du premium pour télécharger les videos. J'ai download helper, petit module firefox et je télécharge tes videos sans me poser de question. Alors est-ce que je viole les droits d'auteur en me permettant d'accéder à tes vidéos, même lorsque je ne suis pas chez moi et connecté au net par exemple ?

Gohan (Dimanche 13 Septembre 2009 à 20:13):

Bonjour à tous tout d'abord je tien à remercier Grafikart pour ces merveilleux tutos, et je voulais ajouter que pour ceux qui ont le souci sur ie moi j'ai pallié le problème en ajoutant une classe sur le troisième lien de la liste déroulante car si on en met que deux ie ne pose aucun problème pour remonter la liste sinon autre petite astuce au-lieu de marquer lien sur le tuto mettez un nom plus grand je ne pourrais pas vous dire pk mais en tout cas sa marche pour moi. Bonne continuation a toi Grafikart et à treès bientot......Gohan

mstarback (Mardi 22 Septembre 2009 à 15:48):

@Grafikart

Je viens du DUT SRC de Saint-Dié. Oui, ya DUT SRC et DUT SRC... Et moi ben, c plutôt DUT SRC moyen moyen bof. Pour te dire, en HTML on apprend encore les frame... Heureusement qu'il existe des blogs comme le tien, avec des gens sympas, très compétents tout en restant très pédagogues. Maintenant on est en droit de se poser la question du "mais p***** à quoi sert ce p***** de DUT ?" !

willboys (Mercredi 30 Septembre 2009 à 10:09):

merci pour ce tuto tres simple a realiser sans java .
pour I.E j ai utiliser la balise css suivante
#id dd { border : no-border ;}I.E ne prenderas pas de bordur , tant pis pour lui
body>#id dd { border: 1 px silver ;}// pour tout navigateur I.E ne prenant pas body>

ci-non je declar :
a{ display : block ; border:1PX solid silver ;}

sa avait de fonctionner sous firefox
encor merci pour ce tuto . continue car ils sont vraiment tres bien expliquer et detailler
bon courage pour la suite

anonym (Mardi 06 Octobre 2009 à 15:08):

Bon tuto. par contre je ne comprend pas pourquoi tu fais un display:block; puisque ce sont des blocks par default? (cf.http://www.siteduzero.com/tutoriel-3-13558-mise-en-boite-partie-1-2.html)
Est ce normal?

anonym (Mercredi 07 Octobre 2009 à 11:17):

Super!Merci pour cette réponse:)

Chahmedia (Lundi 19 Octobre 2009 à 16:08):

Bonjour,
je cherche vraiment a comprendre comment je peut faire pour ajoute des sous menu a un seul bouton dans un menu, le bouton est fait parti d'un design complet d'une charte graphique d'un site web.
Merci d'avance

Cora-liie (Vendredi 30 Octobre 2009 à 08:57):

bonjour, je débute dans le HTML et le CSS, mais j'ai un soucis, mon menu ne se met pas en déroulant... En copiant tout au mot à mot je n'arrive qu'à une liste verticale et un fond colorer... merci d'avance !!!µ

bonne continuation

LaMoume (Lundi 02 Novembre 2009 à 20:57):

Bonjour et MERCI BEAUCOUP pour les deux tutoriels concernant les menus en accordéon. Ils sont très clairs et bien agréables à suivre. Depuis hier je travaille sur "menu accordéon 26" afin de modifier l'affichage des sous-menus du site dont je suis le webmaster (débutante !!! Pour l'instant je procède à des essais de modifications sans mise en ligne). J'aimerais qu'au passage de la souris, ils se trouvent décalés vers la droite du menu vertical, avec un fond transparent. j'ai été voir sur le site JQuéry mais n'ai pas trouvé une instruction du genre slideRight (!).
Pouvez-vous m'aider à modifier le fichier .js ? Merci par avance, j'apprends la javascript en ce moment et ce n'est pas simple. Je pense qu'il faut une série d'instructions mais je ne vois pas bien lesquelles ni dans quel ordre (Pour le fond transparent des ul je vais travailler dans mes feuilles .css) : Maryline

LaMoume (Mercredi 04 Novembre 2009 à 17:32):

Bonjour à nouveau! En allant faire des essais avec JQuéry ainsi que vous le conseillez, j'ai résolu mon problème en complétant le code avec la fonction "animate" de cette façon :

jQuery().ready(function()
{
$(".ascenseur").next("div").hide();
$(".ascenseur").mouseover(function()
{
if($(this).next("div").is(":hidden")){
$(".ascenseur").next("div:visible").slideUp();
/*$(this).next("div").slideDown();*/
$(this).next("div").animate({
width:"155px",
marginLeft:"155px",
opacity:0.9,
}, 1500);

}
});
});

oupela (Jeudi 05 Novembre 2009 à 18:29):

toutes mes félicitations pour ce cours très très bien expliqué

Tux (Samedi 07 Novembre 2009 à 20:25):

vraiment genial ce tutoriel, tres bien explique

Vixaborub (Jeudi 19 Novembre 2009 à 10:14):

Hello et merci beaucoup pour ce très beau tuto.
J'ai le même pb que Cora-liie mon menu n'est pas déroulant (testé sur FF, Safari et IE).

Ca bloc au niveau de
dl dd
{
display : none;
}

dl:hover dd
{
display : block;
}

Je n'arrive pas à comprendre mon erreur.
Merci de votre aide.

Jeff (Mercredi 25 Novembre 2009 à 09:38):

Une toute petite question dsl je commence a peine la programmation.
comment on fais pour les menu soit centres ?

référencement maroc (Jeudi 24 Décembre 2009 à 22:51):

Pour ceux qui cherchent a automatiser la fermeture des balises sur Notepad++ :
TextFX - TextFW Settings - Cocher "Autoclose XHTMl/XML <tag>.

romain (Lundi 28 Décembre 2009 à 19:20):

Je viens de tomber sur ton site cette après-midi et il est passé direct en favoris !
Bravo !

J'ai une petite question : Pourrais-je avoir les dimensions des images utilisées ?

Merci.

Thom (Mercredi 30 Décembre 2009 à 17:35):

Bonjour,
Je viens de voir ton tuto et un momment donné tu parle du problème avec IE. Tu peux remplacer les 2eme pointillés par hidden(qui est en faite une bordure caché.). Sa donne: dd ul li a{ border-bottom:hidden ;}

Hugg (Lundi 11 Janvier 2010 à 13:15):

Pratique ton site, ta vidéo m'a aidé dans un de mes projets. Niveau IE, je n'ai pas eu ce problème peut-être qu'avec la mise jour IE, ce problème ne se pose plus ! En tout cas merci!

Stephane (Lundi 11 Janvier 2010 à 15:03):

Bonjour,
Vraiment sympa le tuto, mais je suis sur ie est tout marche sauf le hover.
Franchement dommage.
Si quelq'un a une solution simple.
Merci à l'auteur et bravo du bon boulot

shaz (Mercredi 13 Janvier 2010 à 07:22):

Bonjour à toutes et à tous,

Alors je ne ferais que rajouter à la liste des remerciements, car grâce à ce tutoriel j ai enfin compris les menus déroulant; et je peux continuer à faire mon site.
Un grand merci à son auteur.

Shaz

Charly (Lundi 18 Janvier 2010 à 22:52):

C'est bon j'ai résolu pour IE6

Il suffit de placer le fichier HTC dans le body...car IE 6 prend en compte le hover que sur le a et grâce à ce petit script il prendra tout en compte :

http://www.tagbytag.org/fr/articles/internet-explorer-testing-debugging-guide?page=3

enjoy et à mort IE6 quand même !
:)

dave (Mardi 19 Janvier 2010 à 21:34):

j'ai testé toutes vos astuces, mais aucune ne marche !!
Y'a qu'en même un soucis !!! Si quelqu'un a trouvé la solution 100ù CSS je suis preneur !

Merci encore a Grafikart pour tous ces tutos de qualité ^^

gc (Vendredi 22 Janvier 2010 à 20:58):

coucou , une soluce 100% css et valide html n'existe qu'en théorie ou seulement pour quelques navigateurs.
Pourquoi ? ... Comment tu fais sans souris , sur IE6 , etc ...
Si le tuto deblaie bien le principe , il faut creuser un peu plus pour en faire un menu qui tient la route et ne pas sauté dessus comme une soluce a copier/coller (même si l'apprentissage en passe par la )

Premier chose , tenter de comprendre et d'analyser comment ça marche .
, .. et tout les pros s'accorderont à te dire que sans Javascript pour t'épauler c'est mission impossible de faire un menu déroulant solide et passe-partout sans devoir en passer par des acrobaties hasardeuses (lien a ouvrir dans IE6 et sans javascript : http://yidille.free.fr/plux/valign/?16-menu-deroulant-compatible-i6 et http://gcyrillus.free.fr/essai/improbable-menu-deroulant.html JE NE CONSEILLE A PERSONNE DE SE SERVIR DE CES MENUS POUR IE6 )

Ensuite , un menu déroulant devrait pouvoir etre gardé ouvert au clic ou tabulation clavier (voir :focus et :active en complément de :hover ) du coup le onblur ou onmouseout devient nécessaire et ne se gère que par le biais de javascript , on peut tenter d'omettre le onfocus ou onclick en ajoutant un attribut tabindex ... de la pour rester valide on va etre tenter d'opter pour un doctype html5 (qui garde IE6/7/8 en mode standard).

Enfin une fois que l'on aura commencer a maitriser l'ouverture/fermeture d'un sous menu , reste encore a le mettre en forme de façon harmonieuse dans les différents navigateur , résolutions et orientations vertical , horizontal , a droite , a gauche , sans deborder de l'ecran , et enfin l'integré a la page qui peut avoir un graphisme complexe ...

La conception d'un premier menu déroulant peut devenir longue et compliqué , au fur et a mesure que l'on en découvre ses défauts et ses limites .
Il faut un minimum de connaissance dans le code(x)html et les styles , savoir lié les deux et tiré profits des selecteurs CSS.

Profité de ce tuto pour faire vos premiers pas

@grakikart : je ne sais pas si tu avais lu et pris en consideration les dire d'un vrai autodidacte :http://www.grafikart.fr/tutoriels/video/menu-deroulant-css-32 #c580 ... qui ne dis rien approuve

Cordialement bien sur

bemaluvi (Samedi 23 Janvier 2010 à 10:20):

J'aimerais avoir votre avis sur ce menu. Est-ce qu'il peut fonctionner sur une majorité de navigateurs ?

Code XHTML :
<ul id="conteneur"><!-- Boite globale -->
<li><a href="#">Photoshop</a>
<ul class="sousmenu"><!-- Sous Menu Photoshop -->
<li><a href="#">les pixels</a></li>
<li><a href="#">la résolution</a></li>
<li><a href="#">la définition</a></li>
</ul>
</li>
<li><a href="#">Illustrator</a>
<ul class="sousmenu"><!-- Sous Menu Photoshop -->
<li><a href="#">le vectoriel</a></li>
<li><a href="#">les objets</a></li>
<li><a href="#">les sélections</a></li>
<li><a href="#">les contours</a></li>
<li><a href="#">les calques</a></li>
</ul>
</li>


Code CSS :
#conteneur {
font: normal 11px verdana, sans-serif;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.sousmenu {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: #000000;
text-decoration: none;
display: block;
padding: 4px 8px;
background: #3B4E77;
border-right: 2px solid #fff;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #F2462E;
}

#conteneur li {
float: left;
width: 150px;
}
#conteneur .sousmenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
#conteneur li:hover > .sousmenu {
display: block;
}
</css>

otitio (Vendredi 19 Février 2010 à 11:52):

bonjour désolé je suis incompétent je connais rien mais je croit avoir lu que en joutant une hauteur de 1% au lien un problème d'IE7 serait régler . Je ne sait pas si c'est important les 1% mais les tutos présents ici m'aide alors je vais éssayer d'aider.

man11110000 (Mardi 23 Février 2010 à 03:07):

Bonjour,
Tout dabord, un grand bravo et merci pour cet excellent tuto, et je pése mes mots!

Ensuite, pour ceux qui rencontrent des problèmes avec IE, je leur conseil de voir le lien de Naise, cité plus haut, de cliquer droit sur la page et "afficher source".

Cela vous permettra d'obtenir un aperçus du code qui fonctionne sous IE.

a vous d'ajuster à vos besoins.

Merci Naise
Merci Grafi

Rain (Mardi 23 Février 2010 à 11:57):

Merci Poour ce super Tuto !!! cependant je ne comprend pas même après avoir suivie toute les instructions mon menu déroulant a toujours un problèmes lorsqu'il y a du texte en dessous de lui aidez s'il vous plait !!
Merci =)

Rain (Mardi 23 Février 2010 à 12:01):

J'ai oublié mon code HTML
<body>
<div id="banner" class='container_12' >
<div id="menu_gauche" class="grid_9"></div>
<div id="menu_droite" class="grid_3">Menu Droite</div>
</div>
<div id="conteneur" class='container_12'>
<div id="menu" >
<dl>
<dt> Configuration</dt>
<dd>
<ul>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>
</dd>

</dl>
<dl>
<dt> Serveur</dt>
<dd>
<ul>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>

</dd>
</dl>
<dl>
<dt> Client</dt>
<dd>
<ul>
<li> <a href="ajoutclient.php">Ajout Client</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
</ul>

</dd>
</dl>

</div>

</div>
<div id="contenu" class='container_12'>
<div class="grid_2">
La série est encore en cours de prépublication dans le magazine hebdomadaire Weekly Shonen Jump.
</div>

<div class="grid_8">
Ichigo Kurosaki est un lycéen de 15 ans, qui aurait pu être comme les autres.
</div>
<div class="grid_2">

<ul>
<li> <a href="ajoutclient.php">Ajout Client</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>
<li> <a href="#">lien 1</a></li>


</ul>
</div>
</div>

</div>

Et mon Code CSS:

div#banner {
background-image:url(banner.png);
height:150px;
}

#foot {
background-image:url(foot.png);
height:150px;
clear:both;
}


div#menu_gauche
{
color:#369;
}

div#menu_droite{
color:white;
}

#conteneur{

background-image:url(menu.png);
height:40px;
position:relative;
}

#menu
{
position:absolute;
height:40px;
}

dl{
height:40px;
margin:0;
padding:0;
display:block;
float:left;
}

dt{
width:150px;
display:block;
height:40px;
color:white;
line-height:40px;
text-align:center;
border-right:dotted 1px #FFF;
cursor:pointer;
}

dd{
width:150px;
margin:0;
padding:0;
display:block;
background-color:#FFF;
}

dd ul{
margin:0;
padding:0;
text-align:center;
list-style:none;
}

dd ul li {
display:block;
margin:0;
padding:0;
}


dd ul li a{
text-decoration:none;
display:block;
height:30px;
line-height:20px
text-align:center;
border-top:dotted 1px black;
border-bottom:dotted 1px black;
width:150px;
background-color:grey;

}

dd ul li a:hover{
background-color:black;
}

dl dd{
display:none;
}

dl:hover dd{
display:block;
}

Merci

grint854 (Vendredi 12 Mars 2010 à 17:49):

bonjour,voila ce qu'il me faut,je n'ai plus qu'a regarder cette vidéo de nombreuses fois.
Les liens hypertextes sont ma bête noire.

Begood (Lundi 10 Mai 2010 à 14:26):

bravo pour ce tuto !! c'est exactement ce qu'il me fallait !!!

Par cotre quelle est la balise a rajouter pour que lorsque l'on passe sur la partie haute du menu la couleur du me change aussi (Menu1, menu2...)

Merci d'avance

Cantabile (Jeudi 13 Mai 2010 à 15:18):

Bonjour comme Rain s'il y a du texte dessous (sous IE) je ne peux pas dérouler plus de 2 liens... ça ne fonctionne que si je donne un height plus grand dans mon conteneur-menu ! mais si j'ai 6 liens ce n'est pas possible !

Bravo pour ce site et pour tous les tutos très bien fait.

Flyer (Dimanche 23 Mai 2010 à 19:54):

Super tuto comme dab. Seul petit Hic ça ne fonctionne pas avec un Include.

Flyer (Lundi 24 Mai 2010 à 02:10):

Bonjour je voulais poster mon code fait à partir de ce tuto. Mais je n'est pas du faire éxactement pareil car il fonctionner sous IE et bien sur les autre (googleChrome, Firefox,Opera ).
Voila mon code Cdd les balise sont éxactement les même que le tuto. (Juste un petit souci. Je narrive pas a modifier la taille des mes <DL> sans que sa parte en cacaouette).

CODE SANS BEUG :

#menu{
background:url(../img/bar_menu.png) repeat-x;
height:40px;
}

dl{
height:40px;
margin:0;padding:0;
margin-left: 50px;
display:block;
float:left;
}
dl dt,dl dt a{
height:40px;
color:#000;
text-transform:uppercase;
line-height:40px;
}
dt:hover{
cursor:pointer;
color:#FFF;
}
dt a:hover{
cursor:pointer;
color:#FFF;
}

dl:hover dd{
margin:0;padding:0;
display:block;
}

dl dd{
display:none;
margin:0;padding:0;
background:#F90;

}

dd ul {
margin:0;padding:0;
list-style:none;
}
dd li a{
display:block;
line-height:30px;
border: solid 1px #000;
border-top:none;
padding-left:5px;
}

karl (Samedi 28 Août 2010 à 19:10):

bien

fghfg (Mardi 31 Août 2010 à 09:59):

hahaha :d :s :@

nsitsmiti (Mercredi 01 Septembre 2010 à 14:47):

C'est vraiment genial, tout tes tutos sont supers et comprehensibles.
Merci bien