[RESOLU] Menu déroulant en HTML

Menu déroulant en HTML [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 06-10-2006 à 10:43:00    

Coucou à tous,
 
Voilà mon chti problème.
J'ai trouvé grace à ce super forum (qui m'a renvoyé vers pompage.net) un moyen de faire de beaux menus déroulants en html/css seulement. Trop fort !
Ca donne ça : http://www.hallucine.fr/prestation/banderole.php
 
Trop bien, sauf que j'aimerai bien que ma partie déroulante se déroule vers le bas et non sur la droite de chaque menu.
Mes CSS sont les suivants :

Citation :

#nav, #nav ul {
   float: left;
   width: 100%;
   list-style: none;
   line-height: 0.5;
   background: #3F649F;
   padding: 0;
   border: #FFFFFF;
   border-width: 0px 0;
   margin: 0 0 0 0;
}
 
#nav a {
 
   color: #FFFFFF;
   text-decoration: none;
   padding: 0.5em 0em;
}
 
#nav li {
   float: left;
   padding: 5px;
 
}
 
#nav li ul {
 
   left: -999em;
   position:absolute;
   display:none;
   height: auto;
   width: 12em;
   font-weight: normal;
   border-width: 1.25em;
   margin: 0;
   text-align:left;
 
}
 
#nav li li {
   padding-right: 0em;
   width: 12em
}
 
#nav li ul a {
   width: 12em;
   w\idth: 12em;
}
 
#nav li ul ul {
   margin: -1.75em 0 0 14em;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
   left: auto;
   display:block;
}
 
#nav li:hover, #nav li.sfhover {
   background: #003063;
}
 
 
dl dt{
 
font-weight:bold;
 
}


 
J'ai essayé d'un peu tout modifier, mais rien n'y fait ! Si qq1 avait une idée, ça serait super.
Merci bcp bcp de votre aide.
 
Bon courage à tous
 
PS : Si vous avez besoin de précisions n'hésitez pas à demander !


Message édité par Pierrick81 le 09-10-2006 à 16:41:26
Reply

Marsh Posté le 06-10-2006 à 10:43:00   

Reply

Marsh Posté le 06-10-2006 à 11:20:27    

essaye de remaplcer :  
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {  
   left: auto;  
   display:block;  
}  
 
par  
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {  
   left: 0;  
   display:block;  
}

Reply

Marsh Posté le 06-10-2006 à 12:05:15    

Euh tu peux aller voir le résultat... :) je "crois" que ça ne marche pas.
Je vais créer un pack pour que vous puissiez tester.
Merci quand même...
 
Edit ---
 
Je viens donc de créer un dossier test pq je travaillais comme un boulet sur la version public du site !
Le résultat de flo850 est donc à la page suivante :  
http://www.hallucine.fr/test/
 
Pour ceux que ça intéresse j'ai fait un petit fichier zip (http://www.hallucine.fr/test/Menu_html.zip) avec le code de la page et les CSS. Si qq1 pouvait me dépanner ça serait super super cool :)
Merci à tous
++
Pierrick


Message édité par Pierrick81 le 06-10-2006 à 12:18:13
Reply

Marsh Posté le 06-10-2006 à 12:36:09    

Si tu veux que tes sousmenu s'affichent sous l'élément correspondant, alors il ne faut pas les mettres en position absolut. Si tu les mets en position bsolut, c'est sur, ils s'afficheront à un endroit fixe de la page.
 
Un exemple de menu déroulant comme tu le souhaites :
http://forum.hardware.fr/hardwaref [...] -1.htm#bas
 
PS : Avec ton systéme de 4 niveaux de listes imbriqué, j'ai du mal à voir ce qui correspond au menu et ce qui n'a rien à voir. Et comme je n'ai pas le temps de fouiller le code de ta page, je te laisse adapter ton menu grace à l'exemple que je t'ai indiqué.

Reply

Marsh Posté le 06-10-2006 à 14:31:14    

Merci omega2, je vais effectivement tenter de faire le ménage dans ma page de CSS. J'ai adapté ce modèle et j'ai pas du virer tout ce qui était inutile !
Par contre j'a voulu tester ton menu, en créant la page html et la page css, mais rien a faire, ça ne donne pas un menu déroulant, le menu est permanent. Il y a peut-être qqch que je fais mal.
++

Reply

Marsh Posté le 06-10-2006 à 14:43:36    

C'est un code que j'avais pondus il y a déjà un an pour montrer qu'il était possible de faire des menus déroulant 100% css donc je me souviens plus trop ces limites.
 
Déjà, si tu utilises IE, il faut savoir qu'IE ne sait faire de "rollover" que sur des liens. A l'époque je n'en avais pas mis pour avoir un code de test qui soit sémantiquement le plus propre possible. Il faut donc les rajouter et modifier légérement le css si tu veux tester avec IE (par contre, ca marche trés bien sans pour firefox) En clair, le "li.niveau1:hover    ul" devient "li.niveau1 a:hover    ul" dans le css.
 
Si ca marche toujours pas aprés cette modif là , je relirais mon code pour voir pourquoi ca bloque.

Reply

Marsh Posté le 09-10-2006 à 16:40:16    

Désolé omega2, je n'ai pas retouché à ton menu !
Par contre j'ai réussi à faire ce que je voulais !
Voici donc ci dessous les CSS pour obtenir un menu tout beau avec la taille des menus en fonction de la taille du texte et non une taille fixe :

Code :
  1. #nav, #nav ul {
  2.    float: left;
  3.    width: 36em;
  4.    list-style: none;
  5.    line-height: 1;
  6.    background: #3F649F;
  7.    padding: 0;
  8.   /* border: solid #eda;*/
  9. /*  border-width: 1px 0;*/
  10.    margin: 0 0 1em 0;
  11. }
  13. #nav a {
  14.    display: block;
  15.    width: auto;
  16.    w\idth: auto;/*largeur case de niv1*/
  17.    color: #FFFFFF;/*couleur du texte tt nivo*/
  18.    text-decoration: none;
  19.    padding: 0.5em 1em;/*marge haut bas et marge gch dr tt nivo*/
  20. }
  22. #nav li {
  23.    float: left;/*alignement des cases du menu*/
  24.    padding: 0;
  25.    width: auto;/*largeur case de niv1*/
  27. }
  29. #nav li ul {
  30.    position:absolute;
  31.    left: -999em;/*place des menus nivo2*/
  32.    height: auto;/*hauteur du block de nivo 2-3-4*/
  33.    width: auto;
  34.    w\idth: 14em;/*largeur du block de nivo 2-3-4*/
  35.    font-weight: normal;/*text decoration pour les blocks de nivo 2-3-4*/
  36.    border-width: 0em;/*largeur des bordures des blocks de nivo 2-3-4*/
  37.    margin: 0;
  38. }
  40. #nav li li {
  41.    padding-right: 0em;/*largeur entre fin de texte et fin zone cliquable de nivo 2-3-4*/
  42.    width: 14em; /*largeur du block (partie cliquable) de nivo 2-3-4*/
  43. }
  45. #nav li ul a {
  46.    width: auto;
  47.    w\idth: 14em;/*largeur du block (partie texte) de nivo 2-3-4*/
  48. }
  50. /*joue sur la position du block de nivo2 par rapport au nivo1*/
  51. #nav li.sfhover ul {
  52.    left: auto;
  53. }
  55. /*joue sur la position du block de nivo2 par rapport au nivo1*/
  56. #nav li.sfhover ul {
  57.    left: auto;
  58. }
  60. #nav li.sfhover {
  61.    background: #003063;/*couleur lors du passage de la souris tout niveau*/
  62. }


 
J'espère que ça servira à d'autres...
 
Bonne continuation...

Reply

Marsh Posté le 09-10-2006 à 16:46:16    

Tu n'as pas à t'excuser. Je t'ai filé le lien vers mon menu pour que t'ai des pistes pour le tiens. A partir du moment où le tiens marche comme il faut, alors c'est bon. :)

Reply

Marsh Posté le 09-10-2006 à 21:53:57    

sinon, en cherchant un peu dans mes favoris , j'ia trouvé ce menu : www.twinhelix.com  
le résultat est vraiment sympa , mais c'est un peu plus lourds que le menu sf

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed