Aller au menu - Aller au contenu

Créer un menu horizontal déroulant en CSS

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page Précédente  1  2  3  ...  5  6  7  8  9  Suivante
Pseudo Commentaire
Page Précédente  1  2  3  ...  5  6  7  8  9  Suivante
Hors ligne SdaliM # Posté le 06/06/2011 à 20:48:12
Je suis niveau 2! Talatatatala
Avatar

 Une petite erreur sur la description du code Javascript :
Au passage de la souris (onmouseover) il ajoute la classe .sfhover, il ne la retire que lorsque la souris s'en va (onmouseout)
DONJON DE NAHEULBEUK : Une saga d'aventures débiles en mp3
 
Hors ligne texdrop # Posté le 13/06/2011 à 15:32:13
Avatar

 Merci pour ce tutoriel, énoncé simplement et non moins très ingénieux.
Toutefois comme viinz et malgré la logique de la réponse apporté par dober tbh, je rencontre moi aussi une difficulté avec le ré-affichage du sous-sous-sous menu.
Plus précisément avec la dernière expression de la ligne de code CSS :
#menud li:hover ul, #menud li li:hover ul, #menud li li li:hover ul {left: auto;}
Je fonce vers le forum !

Edit : j'ai eu la réponse sur le forum, c'est moi qui balise comme un aveugle :-°
Le code css fonctionne très bien avec un sous sous sous menu :p
Hors ligne HuTcHx # Posté le 30/06/2011 à 22:20:08

Bonjour , merci beaucoup pour ce tuto.
Lorsque je l' applique dans une page seul ( vierge) elle fonctionne très bien.

Mais des que je rajoute un background-image , cela ne fonctionne plus.

Je m' explique :

Les sous menues j' ai l impressions qu ils sont cacher derrière l'image de fond.

De même quand je rajoute un slideshow en dessous du menue , jai le même comportement.

Merci pour votre aide & eclaircicement :)
Hors ligne mel__ # Posté le 02/08/2011 à 13:24:33

Bonjour,

Merci pour ce tuto qui est vraiment bien. Cependant je rencontre un ti problème. le déroulant ne se produit pas. j'ai evidemment adpaté le code à mon cas mais je reste encore novice dans le domaine.
(et jsui convaincu que le problème est simple à résoudre mais pour moi c'est peut-etre un peu trop compliquer)
voici mon code html et css:
<td><div id="menu">
<ul class="niveau1">
<li><a href="Accueil.html">Accueil</a></li>
<li><a href="Société.html">Société</a></li>
<li><a href="Compétences.html">Compétences et Réalisation</a></li>
<ul class="niveau2">
<li><a href="Electronique.html">Réalisations Electroniques</a></li>
<li><a href="Informatique.html">Réalisations Informatiques</a></li>
<li><a href="Logiciel.html">Réalisations Logiciels</a></li>
</ul>
<li><a href="Offres.html">Offres</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>
</td></tr>

body {behavior: url(csshover.htc);}
div#menu a {color:#FFFFFF;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#666666;}
div#menu li:hover {background: #FF0000;}
div#menu li.sousmenu:hover {background: #FF0000;}

div#menu li.sousmenu {background-color:#666666}

div#menu li.plop { background-color:#666666;}

div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid}

div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:100px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,


Merci d'avance a tous ceux sui s'y pencheront.
Hors ligne sha002 # Posté le 31/08/2011 à 08:55:00

Bonjour à tous,

J'ai utilisé ce tuto pour faire mes menus et c'est extra!! Merci!!
Je rencontre cependant un petit problème:

Le menu fonctionne sur tous les navigateurs sauf en IE "Compatibility view" ou là, il affiche le menu décalé (sur la droite) ce qui le rend inutilisable. J'ai constaté que pas mal de machines utilisant IE sont en "Compatibility View" par défaut, ce qui pose évidemment un problème.

Personne d'autre n'a se problème?
Quelqu'un pourrait m'aider à le résoudre?

D'avance merci,

Sha002
Hors ligne anonyme # Posté le 04/09/2011 à 13:12:06

Tout simplement le bon click au bon endroit au bon moment.
Un script de menu déroulant très complet et super adaptable.

Je met la note de :
Secret (cliquez pour afficher)
20 /20


Facile d'utilisation et beaucoup d'explication fournis avec le script permettent
le maintenance easy du menu merci
:D
Hors ligne noelle04 # Posté le 23/09/2011 à 19:51:40

bonjour,

j' ai un petit souci sur mon bandeau déroulant de sous-sous-sous-liste, voici mon code html (menu plus, sous liste un peu d' histoire et sous sous liste conte et légende et la sous sous sous liste les contes) c' est la que ca bloque ca apparait mais accroché donc plus de menu déroulant a ce niveau, pouvez vous me dire ou est l' erreur, je pense que je dois rajouté quelque chose dans le css pour que ca marche mais quoi ??? je sais pas, pouvez vous m' aider s' il vous plait ....

<li><a href="#">plus</a>
<ul>
<li>
<li><a href="#">un peu d' histoire</a>
<ul>
<li><a href="./navette.html">Navette</a></li>
<li><a href="./croquant.html">Croquant</a></li>
<li><a href="./canestrelli.html">Canistrelli</a></li>
<li><a href="./sable.html">Sablé</a></li>
<li><a href="./painepice.html">Pain d' épices</a></li>
<li><a href="#">Conte et légende</a>
<ul>
<li><a href="./hansel.html">Hansel et Gretel</a></li>
<li><a href="./bonhommeepices.html">Bonhomme en pain d' épices</a></li>
<li><a href="./saintnicolas.html">Saint Nicolas</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">recherche</a></li>
</ul>
</li>
ps: moi je donne un 20/20 parce que c' est super bien expliquer et en plus ca marche (bon moi j' en voulais plus .... si c' est possible)
Hors ligne jll23 # Posté le 26/09/2011 à 18:58:35

Bonjour,

Bravo pour ce tuto.

Je l'ai rendu paramétrable à partir d'une table Mysql, pour ne montrer que les menus en fonction des autorisations de chaque user.
Mais mon problème est que sous IE8 et (FF5 ou FF6), cela fonctionnait très bien, mais depuis que j'ai installé IE9, il ne se passe plus rien, je n'ai pas encore eu le temps de regarder, car je travaille que sous FF.

si quelqu'un a une idée !
Hors ligne yohan99 # Posté le 03/11/2011 à 15:55:28
"pitence"
Avatar

Avis : Très bon

Études : ESISAR

 Bon sang mais quel tuto incompréhensible, rentre chez toi garçon!!!! Va faire notre TP!!!
VIVA ESPAGNA
 
Hors ligne johan59000 # Posté le 11/11/2011 à 00:15:54

Bonjour, je viens d'utiliser tes codes et tes conseils, ton cours a été très explicite. Merci a toi
Hors ligne Tiiago # Posté le 21/11/2011 à 23:44:57

mmh sa marche ,nikel sous "internet explorer" mais pour google chrome rien ne se passe, on a le menu mais pas le déroulement qui doit se faire, pourquoi?
Hors ligne Blodhorn # Posté le 04/01/2012 à 17:09:53
Avatar

 Bonjour,

Tout d'abord, merci pour le tuto qui fonctionne parfaitement bien.
Mon seul souci, c'est que la configuration CSS du menu a fait sauter l'intégralité de la mise en page.
Rien de dramatique, un peu de bricole et je devrais m'en sortir. (mais si vous avez une idée, je suis preneur)

Toujours est il, Toinouz, je te remercie. Tu as illuminé mon accueil!
A vaincre sans péril, on triomphe sans gloire.
Corneille
 
Hors ligne geek44 # Posté le 08/01/2012 à 20:36:46

bon alors moi les sous sou menu marchent pas! je comprends pas j'ai recopié tout pareil^^ vive le copier coller... quand je passe devant un menu, il me propose les sous menus, mais quand je passe sur le sous menu rien ne se passe^^ je comprends pas merci d'avance
Hors ligne danouille # Posté le 16/01/2012 à 04:39:25

Bonjour à tous! j'ai un petit soucis... le troisième niveau de mon menu se déroule en même temps que le deuxième... Quelqu'un peut m'aider? Pourtant, tout semble nickel :S .
<ul id="menu">
<li>
<a href="index.html">Accueil</a>
</li>

<li>
<a href="#">Ligue</a>
<ul>
<li><a href="#">Règlements</a></li>
<li><a href="#">Équipes</a></li>
<li><a href="#">Classement</a></li>
<li><a href="#">Calendrier</a>
<ul>
<li><a href="#">Complet</a></li>
<li><a href="#">Par équipe</a></li>
</ul>
<li><a href="#">Échanges</a></li>
<li><a href="#">Blessures</a></li>
<li><a href="#">Ballotage</a></li>
</ul>
</li>
.... jusqu'à la fin
Complet et Par équipe sont mes onglets de 3e niveaux.
La formule javascript a été copiée du site.
Hors ligne melchiorderoquefeuil # Posté le 19/01/2012 à 09:31:27

Avis : Très bon

Super tuto, ca marche tres bien !
PHP 100%
HTML 100%
CSS 3 80%
JS 90%
 
Hors ligne laetirom1 # Posté le 28/01/2012 à 14:18:01
Biking is not a crime
Avatar

Avis : Très bon

Bonjours,
Merci pour ce tuto qui ma facilité la finalisation de mon menu.
Il me reste un problème à résoudre.
Afin d'intégrer le menu à ma charte graphique il faudrait intégrer un fond image sur une des cases de mon menu.
J'ai vu que cela étais possible à faire pour l'ensemble du menu avec la fonction
" background : transparent url("adresse de l'image transparente") repeat ;"
Mais est il possible de modifier uniquement le fond d'une cellule ciblée?
D'avance merci
Citation : Françoise Dolto
« Tout groupe humain prend sa richesse dans la communication, l’entraide et la solidarité visant à un but commun : l’épanouissement de chacun dans le respect des différences. »
 
Hors ligne Kyzis # Posté le 30/01/2012 à 03:45:20
Avatar

 @laetirom1. Essais avec une classe à la partie de la liste visé... C'est à dire à la balise <li>.

Ensuite dans ton CSS tu appel cette classe et tu y met une propriété background...
Votre graveur DVD de laptop rend souvent l'âme ? Vous en avez marre de débourser de l'argent à chaque fois pour le faire remplacer. Ben, ne vous fessez plus avoir. Acheter un graveur DVD externe. Il vous dura plus longtemps. Votre porte-feuille en sera plus reconnaissant. "Expérience personnel..."
 
Hors ligne Steven.87 # Posté le 30/01/2012 à 15:35:26

Avis : Décevant

Trop de code et pas assez d'explications.
Les explications sont entassées dans le code ...
Hors ligne laetirom1 # Posté le 30/01/2012 à 22:43:23
Biking is not a crime
Avatar

Avis : Très bon

Citation : Kyzis
@laetirom1. Essais avec une classe à la partie de la liste visé... C'est à dire à la balise <li>.

Ensuite dans ton CSS tu appel cette classe et tu y met une propriété background...



Effectivement ta ligne de commande me permet d'ajouter une image de fond, en déplacent le cadre je vois que mon images de fond ce trouve bien en place.
Par contre l'image reste cachée derrière la fenêtre blanche d'origine de mon menu.
Je voudrais ou rendre transparente la 1er fenêtre ou remplacer directement le background de celle ci.
Merci
Citation : Françoise Dolto
« Tout groupe humain prend sa richesse dans la communication, l’entraide et la solidarité visant à un but commun : l’épanouissement de chacun dans le respect des différences. »
 
Hors ligne JeanLuc61 # Posté le 04/02/2012 à 10:18:32

Bonjour,
Super tuto je viens de l'appliquer à la lettre et ça fonctionne très bien.
Mon seul problème est que ça a fait descendre le reste de ma page d'environ 450 à 500px.
Comment puis je y remédier
Merci d'avance ?
Hors ligne pedrocorse # Posté le 08/02/2012 à 16:45:48

Avis : Très bon

Ville : Bastia
Pays : France métropolitaine

 J'ai réussi à intégrer le menu dans ma page, j'avais un soucis avec IE7 mais j'ai résolu avec un CSS spécial pour IE7.
Un petit soucis subsiste, comme le survol n'existe pas sur les smart phone comme iPhone, je me demandais comment faire pour faire apparaître le menu sur ces iPhones, iPads, etc.

Si quelqu'un a la solution ce serais sympa

Édit : il suffit de faire un lien vers # par exemple et le tour est joué
Hors ligne Adil Hill # Posté le 09/02/2012 à 14:42:49

Avis : Très bon

Bonjour a tous merçi pour ce tuto il m'a bien aider.
Hors ligne friends-express # Posté le 15/02/2012 à 17:32:42

Avis : Bon

Bon tuto, mais comment le centrer ?
Hors ligne kimss # Posté le 20/02/2012 à 06:51:49

Avis : Très bon

Je viens de te mettre très bon, car c'est très bon !

Par contre,même question que mon VDD, comment centrer ce menu ?

Cordialement,

Kims.
Hors ligne KOBB # Posté le 02/03/2012 à 07:45:11

j'ai modifier un peu l'exemple pour faire un menu mas verticale, avec les sous menus a droite du menu.
je problème que je rencontre, c'est que je n'arrive pas a mettre le sous menus a coté du lien que je survole dans mon menu.

donc comment faire svp ?
Hors ligne osteos # Posté le 02/03/2012 à 11:44:47

Salut,
très bon tuto, encore merci!!!!
Néanmoins, mon menu fait disparaître les bordures droite et gauche du header dans le quel il se trouve(uniquement au niveau du menu, pas sur l'ensemble du header). Y a t il une solution?
Hors ligne Antoine Borda # Posté le 03/03/2012 à 10:33:13

Avis : Très bon

Excellent Tuto merci beaucoup!
Hors ligne K0ld # Posté le 04/03/2012 à 19:03:22
Avatar
close

Études : SUPINFO Rhône-Alpes à Grenoble

 Pour le deplacer (centrer notamment) il faut ajouter dans le CCS : sous
position: absolute il faut ajouter :

top: 180px;
left: 255px;

pour le mettre a 180px du haut et 255px de la droite.

Mais j'ai une question, mes sous-sous-listes ne s'affichent pas... A moins qu'il n'y en ait pas ?
Hors ligne roroaqwz # Posté le 05/03/2012 à 20:08:39

Avis : Très bon

bonjour
j'ai une question peut être bête mais se tuto marche pour wordpress ?
merci
Hors ligne vin100lorant # Posté le 08/03/2012 à 09:12:48

Merci ! Super tuto! :D je suis débutant en css et j'ai pu aggrémenter mon site avec.
J'ai cependant un blocage :colere2: . J'aimerai le centrer quelque soit la largeur de page. Mon site s'etend à 100% de largeur.
J'ai essayé ça dans different code css mais rien n'y fait...
Code : CSS
1
Margin:auto; padding:auto;


Une idée?
:euh:
Pour accéder à cette section
Connectez-vous !
connexion_rpx