11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Menu accordeon horizontal

Bonsoir,
J'ai fait le tuto alsacreation sur le menu en jquery : http://www.alsacreations.com/tuto/lire/605-Creer-un-menu-accordeon-avec-jQuery.html
Je cherche à l'adapter pour le mettre à l'horizontal mais quand je click sur mon onglet "accueil" pour faire apparaitre les sous-menus et bien tous les autres onglets "page2, page3 etc..." descendent et se mettent au même niveau que mon 3eme li de mon sous-menu (accueil 3) !
Je suis pas très bon en Javascript et je vois pas comment empêcher que les autres onglet du menu descendent!

Voici mon code (css + html + Jquery):
<style>
nav
{
width: 700px;
text-align: right;
padding: 15px;
background-color: green;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

.inv
{
 display: block;
}

nav a
{
    font-size: 1.3em;
    color: #A38F2C;
    color: #8E5FA8;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #6378A8;
    border-bottom: 3px solid #6378A8;
}

</style>

</body>
<div id="menu">
	<div id="logmen">
		<h1>menu</h1>
	</div>
			<nav>
				   <ul class="navigation">
				       <li class="toggleSubMenu"><span>Accueil</span>
							<ul class="subMenu">
								<li class="inv"><a href="#" title="Aller à la page 2.1">accueil1</a></li>
								<li class="inv"><a href="#" title="Aller à la page 2.2">accueil2</a></li>
								<li class="inv"><a href="#" title="Aller à la page 2.3">accueil3</a></li>
							</ul>
						</li>
	
				       <li><a href="ddsdc.php">page2</a></li>
				       <li><a href="#">page3</a></li>
					    <li><a href="#">page4</a></li>	
					    <li><a href="#">page5</a></li>					
				       <li><a href="#">page6</a></li>
				   </ul>
			  </nav>		
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function () {
  // On cache les sous-menus :
  $(".navigation ul.subMenu").hide();

    $(".navigation li.toggleSubMenu span").each( function () {
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + $(this).text() + '<\/a>') ;
    } ) ;

    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    }); 

} ) ;
</script>
    </body>
Bonjour,

J'ai dû compter pas loin de 200 sujets similaires sur le forum Smiley cligne

Pour faire simple :
Ce tutoriel (qui en année web commence à dater) n'est pas fait pour ça.
Pour citer l'auteur dans une de ses réponses à la même problématique :
Thomas D. a écrit :
Le menu du tutoriel n'est pas du tout prévu pour cela. Tout l'intérêt du menu accordéon, c'est que l'ouverture d'un sous-menu referme le sous-menu ouvert en donnant l'impression que c'est tout le menu qui réagit (je ne sais pas si c'est clair, c'est pas facile à expliquer). Donc le menu que tu décris n'est plus un menu "accordéon", mais un menu déroulant "classique". Une recherche sur "menu déroulant jquery" dans Google devrait te fournir de nombreuses pistes.

Maintenant, le code ne va pas forcément changer de façon fondamentale, mais le positionnement CSS des différentes parties va évidemment devoir être adapté, l'animation de l'ouverture/fermeture des menus aussi, etc. Bref, adapter le tutoriel demande un niveau suffisant en CSS et JavaScript, ainsi qu'un peu de temps et de patience

Les conseils de Florent sont également à prendre en compte :
fvsch a écrit :
Quelques notes à propos des menus déroulants:
- Ne pas en faire, c'est souvent aussi bien. (Ça force à bosser un peu l'architecture des contenus, les intitulés de rubriques, l'ergonomie, sans sauter sur cette solution de facilité ultra-classique.) Smiley cligne
- Si on souhaite en faire un, on commencera en général par un menu déroulant en CSS pur qui tient la route, avant de l'enrichir grâce à un script tel que Superfish (plugin jQuery) qui gère notamment la navigation au clavier.
- L'accès au contenu doit être possible simplement en cliquant sur les éléments de premier niveau. Pour information, les périphériques mobiles à écran tactile ne permettent pas de survoler un élément comme on le fait avec le pointeur d'une souris.

Comme déjà dit, tu trouveras aisément, des tutoriels, des scripts "prêts à l'emploi", qui répondront plus ou moins bien à ton besoin et aux contraintes spécifiques (accessibilité, ergonomie, interopérabilité,...) de ce type d'architecture.

Quelques pistes intéressantes également avec les nouvelles normes HTML5 et CSS3.
Pour finir, Un article intéressant sur le sujet chez nos amis du train de 13h37.

Bon courage Smiley cligne
Sujet clos
Aller à