Menu déroulant horizontal

Menu déroulant horizontal - HTML/CSS - Programmation

Marsh Posté le 07-11-2008 à 00:14:07    

Hello,
 
Je m'arrache les cheveux, voilà un jour que je tente de percer le mystère de ce menu déroulant horizontal : http://www.cfnews.net/
 
J'ai même tenté de trouvé le style css appliqué à la chose, je n'ai trouvé que le style "nav1"
 
J'ai essayé de bidouiller avec le tutorial de alsacreation mais sans succès :(
 
Si quelqu'un pourrait me donner un coup de pouce je ne dirai pas non car je crise :( Je sais, il y a des menus moins élaborés sur le net mais depuis que j'ai vu celui là, c'est juste ce que je voudrai avoir sur mon site...
 
Merci beaucoup pour l'aide, j'ai peut être du louper un truc ...

Reply

Marsh Posté le 07-11-2008 à 00:14:07   

Reply

Marsh Posté le 08-11-2008 à 23:43:12    

Code :
  1. <div class="navigation" id="navigation">
  2.   <ul class="nav1" id="nav1" OnMouseOver="SelectVisible('hidden',document.getElementsByTagName('select'));"  OnMouseOut="SelectVisible('visible',document.getElementsByTagName('select'));">


 
Si ça peut t'aider  :bounce:

Reply

Marsh Posté le 10-11-2008 à 10:34:59    

Tu voudrais quelque chose comme sur le site de mon asso que je suis en train de développé?
 
http://test.citudor.net

Message cité 1 fois
Message édité par jazon14 le 04-06-2009 à 02:35:07

---------------
C'est lorsqu'on a tout perdu qu'on est libre de faire tout ce que l'on veut...(Edward Norton, Fight Club)
Reply

Marsh Posté le 10-11-2008 à 12:20:18    

jazon14 a écrit :

Tu voudrais quelque chose comme sur le site de mon asso que je suis en train de développé?

 

http://lsc.citudor.org


Code :
  1. <div id="menuHz">
  2.    <ul id="Onglet">
  3.     <li><a class="nav_0" href="index.php"><span>Koms</span></a>
  5.     </li>
  6.     <li><a class="nav_1" href="index.php?page=informations"><span>Informations</span></a>
  7.      <ul class="nav_1_x">
  8.       <li><a href="index.php?page=reglement_lsc"><span>Le r&egrave;glement du L.S.C.</span></a></li>
  9.       <li><a href="index.php?page=horaires"><span>Les horaires</span></a></li>
  10.       <li><a href="index.php?page=faq"><span>F.A.Q.</span></a></li>
  12.       <li><a href="index.php?page=contact"><span>Contact</span></a></li>
  13.      </ul>
  14.     </li>
  15.     <li><a class="nav_2" href="index.php?page=profil"><span>Moy profil</span></a>
  16.      <ul class="nav_2_x">
  17.       <li><a href="index.php?page=afficher_profil"><span>Afficher</span></a></li>
  18.       <li><a href="index.php?page=editer_profil"><span>Editer</span></a></li>
  20.       <li><a href="index.php?page=photo"><span>Photo</span></a></li>
  21.       <li><a href="index.php?page=cv"><span>C.V.</span></a></li>
  22.      </ul>
  23.     </li>
  24.     <li><a class="nav_3" href="index.php?page=preinscription"><span>Pr&eacute;-scrib</span></a>
  25.     </li>
  26.     <li><a class="nav_4" href="index.php?page=admin"><span>Administration</span></a>
  28.      <ul class="nav_4_x">
  29.       <li><a href="index.php?page=selectioner_inscription"><span>Valider une pr&eacute;-scrib</span></a></li>
  30.       <li><a href="index.php?page=inscription"><span>Inscription</span></a></li>
  31.       <li><a href="index.php?page=modif_fiche_active"><span>Modif fiche active</span></a></li>
  32.       <li><a href="index.php?page=modif_fiche_desactive"><span>Modif fiche inactive</span></a></li>
  33.      </ul>
  35.      <li><a class="nav_5" href="index.php?page=consulter"><span>Consulter</span></a>
  36.      <ul class="nav_5_x">
  37.       <li><a href="index.php?page=trombinoscope"><span>Trombinoscope</span></a></li>
  38.       <li><a href="index.php?page=membres"><span>Les Membres</span></a></li>
  39.       <li><a href="index.php?page=anciens_membres"><span>Anciens Membres</span></a></li>
  40.       <li><a href="index.php?page=citusalle"><span>Citusalle</span></a></li>
  42.       <li><a href="index.php?page=liste_mac"><span>Liste @ Mac</span></a></li>
  43.       <li><a href="index.php?page=remarques"><span>Voir les remarques</span></a></li>
  44.       <li><a href="index.php?page=coordonnees"><span>Coordonn&eacute;es des MA</span></a></li>
  45.       <li><a href="index.php?page=imprim"><span>Impression des cartes</span></a></li>
  46.      </ul>
 

Ici le CSS : http://lsc.citudor.org/css/menu.css

 

Et le JS

Code :
  1. $(document).ready(function()
  2. {
  3. $("#Onglet > li" ).hover
  4. (
  5.  function()
  6.  {
  7.  $(this).addClass("OngletLiHover" );
  8.  $("#Onglet > li.OngletLiHover > ul" ).removeClass("DisplayNone" );
  9.  $("#Onglet > li.OngletLiHover > ul" ).addClass("DisplayBlock" );
  10.  },
  11.  function()
  12.  {
  13.  $("#Onglet > li.OngletLiHover > ul" ).removeClass("DisplayBlock" );
  14.  $("#Onglet > li.OngletLiHover > ul" ).addClass("DisplayNone" );
  15.  $(this).removeClass("OngletLiHover" );
  16.  }
  17. );
  18. });
 

C'est ce que j'ai pu retirer du site :/
En espérant que celà puisse aider :)


Message édité par FR-DarkRod le 10-11-2008 à 12:24:38
Reply

Marsh Posté le 10-11-2008 à 18:08:14    

c'est du jQuery donc pour ca faut la librairie qui va avec...
 
je lui aurais passer le code sans problèmes si il l'avait demandé hein :)
 
la librairie et la doc de jQuery : http://docs.jquery.com/Main_Page (en)
 
si je peux t'aider :)


---------------
C'est lorsqu'on a tout perdu qu'on est libre de faire tout ce que l'on veut...(Edward Norton, Fight Club)
Reply

Marsh Posté le 11-11-2008 à 19:10:23    

Bonjour à tout le monde, désolé pour le retard de ma réponse !
 
Jazon14, merci beaucoup, effectivement, ce menu horizontal me plait beaucoup. Je recherche quelque chose de "propre / professionnel" et ce menu déroulant me convient tout à fait.
 
Pourrais-tu m'expliquer comment l'implémenter stp ? Merci également à FR-DarkRod pour vos réponses.
 
Bien cordialement. A bientôt jazon14.

Message cité 1 fois
Reply

Marsh Posté le 02-12-2008 à 04:33:29    

zepouss a écrit :

Bonjour à tout le monde, désolé pour le retard de ma réponse !
 
Jazon14, merci beaucoup, effectivement, ce menu horizontal me plait beaucoup. Je recherche quelque chose de "propre / professionnel" et ce menu déroulant me convient tout à fait.
 
Pourrais-tu m'expliquer comment l'implémenter stp ? Merci également à FR-DarkRod pour vos réponses.
 
Bien cordialement. A bientôt jazon14.


 
Désolé du retard mais j'ai eu quelques problèmes IRL et donc je ne suis pas revenu ici depuis ta réponse...
 
Alors pour le menu déroulant j'ai plusieures choses :  
 
une CSS indépendante (./css/menu.css)
 

Code :
  1. /**************** Menu Navigation haute ****************/
  2. #Menuhz {
  3. margin:0;
  4. padding:0;
  5. display: block;
  6. width: 990px;
  7. float: left;
  8. height: 46px;
  9. z-index:10 !important;
  10. position:relative;
  11. text-align:center;
  12. background-image: url(../img/bandeau.gif);
  13. background-repeat:no-repeat;
  14. }
  15. #Menuhz a {
  16. color:#c0c0c0;
  17. margin:0;
  18. padding:0;
  19. }
  20. #Menuhz a:hover {
  21. margin:0;
  22. padding:0;
  23. }
  25. #Menuhz #Onglet {
  26. margin:6px 0 0;
  27. padding:0;
  28. height: 21px;
  29. }
  31. #Menuhz #Onglet li {
  32. float:left;
  33. text-decoration:none;
  34. list-style:none;
  35. position:relative;
  36. margin:0;
  37. padding:0;
  38. }
  40. #Menuhz #Onglet li .nav_0 {
  41. display: block;
  42. float: left;
  43. width: 100px;
  44. height:21px;
  45. }
  47. #Menuhz #Onglet .nav_0_on,
  50. #Menuhz #Onglet li .nav_1 {
  51. display: block;
  52. float: left;
  53. width:135px;
  54. height:21px;
  55. }
  57. #Menuhz #Onglet .nav_1_on,
  60. #Menuhz #Onglet li .nav_2 {
  61. display: block;
  62. float: left;
  63. width:135px;
  64. height:21px;
  65. }
  66. #Menuhz #Onglet .nav_2_on,
  69. #Menuhz #Onglet li .nav_3 {
  70. display: block;
  71. float: left;
  72. width:135px;
  73. height:21px;
  74. }
  76. #Menuhz #Onglet .nav_2_on,
  79. #Menuhz #Onglet li a {
  80. text-decoration:none;
  81. margin:0;
  82. padding:0;
  83. }
  84. #Menuhz #Onglet li ul {
  85. position:absolute;
  86. display:none;
  87. text-decoration:none;
  88. top:21px;
  89. left:0;
  90. margin:0;
  91. padding:1px;
  92. }
  93. #Menuhz #Onglet li ul.nav_0_x {
  94. width: 145px;
  95. }
  96. #Menuhz #Onglet li ul.nav_1_x {
  97. width: 145px;
  98. }
  99. #Menuhz #Onglet li ul.nav_2_x {
  100. width: 145px;
  101. }
  102. #Menuhz #Onglet li ul.nav_3_x {
  103. width: 145px;
  104. }
  105. #Menuhz #Onglet li ul.nav_4_x {
  106. width: 145px;
  107. }
  108. #Menuhz #Onglet li ul.nav_5_x {
  109. width: 145px;
  110. }
  113. #Menuhz #Onglet li ul a,
  114. #Menuhz #Onglet li ul li {
  115. background-color:#333333;
  116. text-decoration:none;
  117. color:#c0c0c0;
  118. margin:0px;
  119. padding:0;
  120. width: 100%;
  121. border: 0px none;
  122. }
  123. #Menuhz #Onglet li ul a:hover,
  124. #Menuhz #Onglet li ul li:hover {
  125. background-color:#ffd200;
  126. text-decoration:none;
  127. color:#333333;
  128. padding:0;
  129. cursor: pointer;
  130. border: 0px none;
  131. }
  132. #Menuhz #Onglet li ul li {
  133. margin-top:-3px;
  134. }
  135. #Menuhz #Onglet li ul a {
  136. margin:0px;
  137. }
  139. #Menuhz #Onglet li ul li a span {
  140. display: block;
  141. margin:0;
  142. padding:0;
  143. font-family: arial, sans-serif;
  144. font-size: 13px;
  145. height: 21px;
  146. padding: 1px 5px 1px 5px;
  147. }
  148. #Onglet .DisplayBlock {
  149. display: block !important;
  150. }
  151. #Onglet .DisplayNone {
  152. display: none !important;
  153. }
  154. #Menuhz #Onglet li .nav_4 {
  155. display: block;
  156. float: left;
  157. width:135px;
  158. height:21px;
  159. }
  160. #Menuhz #Onglet li .nav_5 {
  161. display: block;
  162. float: left;
  163. width:135px;
  164. height:21px;
  165. }


 
un fichier ./js/jquery.js téléchargeable ici => http://docs.jquery.com/Release:jQuery_1.2.6 (trop long pour être pasté...)
 
un controleur pour géré le hide/view (./js/controleur_menu.js):  
 

Code :
  1. $(document).ready(function()
  2. {
  3. $("#Onglet > li" ).hover
  4. (
  5.  function()
  6.  {
  7.  $(this).addClass("OngletLiHover" );
  8.  $("#Onglet > li.OngletLiHover > ul" ).removeClass("DisplayNone" );
  9.  $("#Onglet > li.OngletLiHover > ul" ).addClass("DisplayBlock" );
  10.  },
  11.  function()
  12.  {
  13.  $("#Onglet > li.OngletLiHover > ul" ).removeClass("DisplayBlock" );
  14.  $("#Onglet > li.OngletLiHover > ul" ).addClass("DisplayNone" );
  15.  $(this).removeClass("OngletLiHover" );
  16.  }
  17. );
  18. });


 
et ensuite dans mon index j'ai ca :  

Code :
  1. <div id="menuHz">
  2.    <ul id="Onglet">
  3.     <li><a class="nav_0" href="index.php"><span>Koms</span></a>
  4.     </li>
  5.     <li><a class="nav_1" href="index.php?page=informations"><span>Informations</span></a>
  6.      <ul class="nav_1_x">
  7.       <li><a href="index.php?page=reglement_lsc"><span>Le r&egrave;glement du L.S.C.</span></a></li>
  8.       <li><a href="index.php?page=horaires"><span>Les horaires</span></a></li>
  9.       <li><a href="index.php?page=faq"><span>F.A.Q.</span></a></li>
  10.       <li><a href="index.php?page=contact"><span>Contact</span></a></li>
  11.      </ul>
  12.     </li>
  13.     <li><a class="nav_2" href="index.php?page=profil"><span>Moy profil</span></a>
  14.      <ul class="nav_2_x">
  15.       <li><a href="index.php?page=afficher_profil"><span>Afficher</span></a></li>
  16.       <li><a href="index.php?page=editer_profil"><span>Editer</span></a></li>
  17.       <li><a href="index.php?page=photo"><span>Photo</span></a></li>
  18.       <li><a href="index.php?page=cv"><span>C.V.</span></a></li>
  19.      </ul>
  20.     </li>
  21.     <li><a class="nav_3" href="index.php?page=preinscription"><span>Pr&eacute;-scrib</span></a>
  22.     </li>
  23.     <li><a class="nav_4" href="index.php?page=admin"><span>Administration</span></a>
  24.      <ul class="nav_4_x">
  25.       <li><a href="index.php?page=selectioner_inscription"><span>Valider une pr&eacute;-scrib</span></a></li>
  26.       <li><a href="index.php?page=inscription"><span>Inscription</span></a></li>
  27.       <li><a href="index.php?page=select_fiche_active"><span>Modif fiche active</span></a></li>
  28.       <li><a href="index.php?page=select_fiche_desactive"><span>Modif fiche inactive</span></a></li>
  29.       <li><a href="index.php?page=imprim"><span>Impression des cartes</span></a></li>
  30.       <li><a href="index.php?page=remarques"><span>Voir les remarques</span></a></li>
  31.      </ul>
  32.      <li><a class="nav_5" href="index.php?page=consulter"><span>Consulter</span></a>
  33.      <ul class="nav_5_x">
  34.       <li><a href="index.php?page=trombinoscope"><span>Trombinoscope</span></a></li>
  35.       <li><a href="index.php?page=membres"><span>Les Membres</span></a></li>
  36.       <li><a href="index.php?page=anciens_membres"><span>Anciens Membres</span></a></li>
  37.       <li><a href="index.php?page=citusalle"><span>Citusalle</span></a></li>
  38.       <li><a href="index.php?page=liste_mac"><span>Liste @ Mac</span></a></li>
  39.       <li><a href="index.php?page=coordonnees"><span>Coordonn&eacute;es des MA</span></a></li>
  41.      </ul>
  42.     </li>
  43.     </li>
  44.    </ul>
  45.   </div>


 
petite précision le noir en fond est une image créée par l'infographiste de notre asso...mais après tu peux mettre à peu près ce que tu veux...
 
en principe tu as tout ce dont du peux avoir besoin pour faire le menu...si jamais ca ne fonctionne pas n'hésite pas a me le dire en donnant le lien vers ton site si je peux voir ce qui ne va pas je te le dirais...


---------------
C'est lorsqu'on a tout perdu qu'on est libre de faire tout ce que l'on veut...(Edward Norton, Fight Club)
Reply

Sujets relatifs:

Leave a Replay

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