Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
937 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Menu déroulant en HTML

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] Menu déroulant en HTML

n°1453240
Pierrick81
Posté le 06-10-2006 à 10:43:00  profilanswer
 

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
mood
Publicité
Posté le 06-10-2006 à 10:43:00  profilanswer
 

n°1453266
flo850
moi je
Posté le 06-10-2006 à 11:20:27  profilanswer
 

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;  
}

n°1453312
Pierrick81
Posté le 06-10-2006 à 12:05:15  profilanswer
 

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
n°1453328
omega2
Posté le 06-10-2006 à 12:36:09  profilanswer
 

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é.

n°1453398
Pierrick81
Posté le 06-10-2006 à 14:31:14  profilanswer
 

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.
++

n°1453411
omega2
Posté le 06-10-2006 à 14:43:36  profilanswer
 

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.

n°1454474
Pierrick81
Posté le 09-10-2006 à 16:40:16  profilanswer
 

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...

n°1454478
omega2
Posté le 09-10-2006 à 16:46:16  profilanswer
 

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. :)

n°1454606
flo850
moi je
Posté le 09-10-2006 à 21:53:57  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Menu déroulant en HTML

 

Sujets relatifs
control d'edition ...[RESOLU] Header() en php
[PHP] [Résolu]Pb apostrophe sous windows et pas sous linux[RESOLU] ungetc: propre ou pas...
Live pour apprendre le HTML ou XHTML[Resolu] Requete tableau croisé
html dans un message[Resolu] Envoi de plusieurs trames sans attendre l'ACK
[résolu] Supprimer toutes les lignes d'une feuille[Résolu][Html/Javascript] Liens dans menu déroulant dynamique
Plus de sujets relatifs à : [RESOLU] Menu déroulant en HTML

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.069 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR