18041 sujets

Questions générales et questions de débutants

Menu deroulant horizontal

bonjour après avoir parcouru le site et sans trouver ma réponse je me permet de vous appeler à l'aide.

J'ai vu un tutoriel sur un menu en accordéon avec Jquery que voici
http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

j aurai aimer le mettre à l'horizontal je vous joins mon html, css et js.

html:

<div id="nav">

<ul class="navigation">
    <li><a href="#" title="Aller à la page 1">Accueil</a></li>

    <li class="toggleSubMenu"><span>Artistes</span>
        <ul class="subMenu">
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>

            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>

        </ul>
    </li>
    <li class="toggleSubMenu"><span>Actualitées</span>
        <ul class="subMenu">

            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>

        </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Forum</a></li>
	<li><a href="#" title="Aller à la page 5">Newsletter</a></li>

</ul>
</div>


css:

#nav {
	height:32px;
	background-image: url(couleur/nav.png);
}
.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      color: #000;
      width: 200px;
      font: 1.2em "Trebuchet MS", sans-serif;
      }
   .navigation a, .navigation span {
      display: block;
      padding: 4px 10px;
      color: #000;
      text-decoration: none;
      }
   
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .8em;
      font-size: .9em;
      margin: 0;
      padding: 0;
	  float:left;
      border-bottom: 1px solid #666;
      }
   .navigation ul.subMenu a {
      background: none;
      padding: 3px 20px;
      }
	 ul li {
	 float:left;
	 }


JavaScript:

$(document).ready( function () {
    $(".navigation ul.subMenu:not('.open_at_load')").hide();
    $(".navigation li.toggleSubMenu span").each( function () {
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    $(".navigation li.toggleSubMenu > a").click( function () {
        
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
        }
       
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
        }
       
        return false;
    });

} ) ;


Merci d'avance pour vos réponses et votre aide a une débutante.
Bonjour,

maudinette a écrit :
J'ai vu un tutoriel sur un menu en accordéon avec Jquery que voici
http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

j aurai aimer le mettre à l'horizontal

Il n'est pas fait pour. Si je comprends bien, ce que tu cherches à faire ce serait plutôt un menu déroulant.

Si tu as déjà un bon niveau en CSS et JavaScript, tu peux bien sûr créer ton propre menu déroulant, pourquoi pas en t'inspirant de très loin du menu présenté dans ce tutoriel (et quand je dis de très loin, ça veut dire que si à un moment tu copie tel quel une partie du code du tutoriel, c'est sans doute faux...). Mais comme tu te décris comme débutante, je doute que ça soit la bonne méthode pour arriver à tes fins.

Il faudrait donc plutôt:
- Soit renoncer à l'idée de faire un menu déroulant, et faire plutôt un menu simple (à un seul niveau, donc sans sous-menu), ce qui est bien souvent un exercice salutaire pour réaliser un site bien pensé plutôt que fourre-tout. Smiley cligne
- Soit trouver un script prêt à l'emploi qui fasse déjà exactement ce que tu souhaites.
Sujet clos
Aller à