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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu déroulant horizontal

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu déroulant horizontal

n°1809218
zepouss
Posté le 07-11-2008 à 00:14:07  profilanswer
 

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

mood
Publicité
Posté le 07-11-2008 à 00:14:07  profilanswer
 

n°1810015
FR-DarkRod
Informag€€k
Posté le 08-11-2008 à 23:43:12  profilanswer
 

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:

n°1810302
jazon14
Posté le 10-11-2008 à 10:34:59  profilanswer
 

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)
n°1810356
FR-DarkRod
Informag€€k
Posté le 10-11-2008 à 12:20:18  profilanswer
 

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
n°1810525
jazon14
Posté le 10-11-2008 à 18:08:14  profilanswer
 

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)
n°1810907
zepouss
Posté le 11-11-2008 à 19:10:23  profilanswer
 

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
n°1820399
jazon14
Posté le 02-12-2008 à 04:33:29  profilanswer
 

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)

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

  Menu déroulant horizontal

 

Sujets relatifs
bloquer le sous menu avec flashPb de background pour un menu déroulant Js
Positionnement d'un menuPlacer mon menu au centre de la page ?
Barre de menu Word[PHP/JAVA] Calendrier avec menu avec choix booléen sur chaque jour
Menu déroulant horizontal ( sfhover function)Menu déroulant horizontal
Menu déroulant horizontal - Pb sous ie6menu déroulant horizontal
Plus de sujets relatifs à : Menu déroulant horizontal

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

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