18041 sujets

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

[Résolu] Menu et sous menu horizontal

Bonjour,

J'ai trouvé beaucoup d'exemple de menu horizontal avec des sous-menus verticaux, mais je n'en trouve pas avec des sous-menus horizontaux.

Dans le code html suivant :

<ul id="nav">
    <li> <a href="{#prefixe_site#}sources/accueil.php" >Accueil</a></li>
	<li> <a href="{#prefixe_site#}sources/recherche_entreprises.php" >Entreprises</a>
		<ul>
			<li><a href="{#prefixe_site#}sources/recherche_entreprises.php" >Recherche</a></li>
			<li><a href="{#prefixe_site#}sources/maj_entreprise.php?send_id_entreprise=&send_trt=Ajouter" >Ajouter</a></li>
		</ul>
	</li>
	<li> <a href="{#prefixe_site#}sources/recherche_contacts.php" >Contacts</a>
		<ul>
			<li><a href="{#prefixe_site#}sources/recherche_contacts.php" >Recherche</a></li>
			<li><a href="{#prefixe_site#}sources/maj_contact.php?send_id_contact=&send_trt=Ajouter" >Ajouter</a></li>
		</ul>
	</li>
</ul>


avec le css suivant :

#nav{list-style: none;}

#nav ul {
     padding: 0;
     margin:0;
     list-style: none;
     width:12em;
     z-index:99;
     position:relative;
     overflow:visible;
}

#nav li {
     margin:0;
     position: relative;
     float:left;
     width: 12em;
     background-color:#CCC;
     border:solid 1px #CCC;
     display:block;
     height:auto;
}
/*** Menu ***/
#nav ul li{ border-width:1px 1px 0 0;}
/*** Sous-Menu ***/
#nav ul ul li{ border-width:1px 1px 0 1px;}
/*** Sous-sous Menu ***/
#nav ul ul li:last-child{border-bottom:1px solid #CCC;}

#nav a {
     text-decoration:none;
     display:block;
     padding: 0.1em;
     margin:0.2em 0 0.2em 0.1em;
     width:11.5em;
     height:1em;
}

#nav a:hover, #nav li:hover{
     background-color:#CCC;
}
#nav ul li:hover, #nav ul li a:hover{
     background-color:#CCC;
}

#nav ul{
     display:none;
}

/*Pour tous les navigateurs */
#nav ul ul{
     display:none;
     position:absolute;
     margin-top:-1.8em;
     margin-left:12em;
}


Que faut-il changer pour que le sous-menu devienne horizontal ?

Merci d'avance
Modifié par lodan (11 Feb 2007 - 11:14)
Salut,

Tu n'as pas du en trouver car un sous menu horizontal sous un menu horizontal présente la plupart du temps de gros soucis d'ergonomie.

Mais si tu y tiens, il te suffit d'appliquer un display: inline sur les éléments de ton sous menu.
Mikachu a écrit :
Salut,
Tu n'as pas du en trouver car un sous menu horizontal sous un menu horizontal présente la plupart du temps de gros soucis d'ergonomie.

Il serait bon d'expliquer pourquoi Smiley cligne
Le pourquoi serait intéressant.

Dans mon cas c'est principalement parceque le sous-menu décale mon formulaire.

C'est la raison pour laquelle, je veux le mettre en horizontal.

Cela me demande juste de réserver une ligne sur mon formulaire pour l'affichage de mon sous-menu
a écrit :
Pourquoi ?


Je vais essayer d'expliquer clairement même si c'est plus évident en démonstration. Ci-joint une image explicative.
Voir l'exemple

Prenons un internaute qui ouvre le menu déroulant du lien 4 et veut accéder au lien 4.1.

Dans l'exemple horizontal :
Le réflexe naturel d'un internaute par définition pressé, est d'aller en ligne droite (flèche orange).
Seulement, dans un menu de horizontal à sous navigation horizontale, lorsqu'il se trouve sur le lien 4, s'il choisit la ligne droite, la position initiale du curseur de sa souris le conduira très probablement à passer sur le lien 3, activant ainsi le sous menu de celui ci.
Il sera obligé de recommencer la manipulation, qui risque de ne fonctionner que tant que celui-ci fera l'effort d'appliquer avec sa souris une trajectoire en angle (flèche verte) pour éviter d'ouvrir un autre sous menu.

Dans l'exemple vertical :
L'internaute n'a pas à se soucier de sa position sur le lien, il suffira de descendre tout droit pour qu'il accède au lien souhaité (flèche verte).

Ce que je voulais démontrer, c'est qu'il faut faire en sorte que la navigation soit évidente et simple pour l'internaute, et non le pousser à fournir un effort de manipulation (et là je parle de quelqu'un qui n'a aucun problème moteur). Sur un site commercial, il est bon d'éviter d'énerver ses clients potentiels ou même de les faire fuir. Cela pourrait être dommageable pour l'entreprise. Sur un site personnel non me direz vous ? Oui mais qu'en est-il du confort de l'utilisateur ?


a écrit :
Dans mon cas c'est principalement parce que le sous-menu décale mon formulaire.

Donc par commodité pour toi de n'avoir pas à chercher comment empêcher ce décalage tu rends la navigation des visiteurs de ton site plus compliquée. La sensation utilisateur prime sur tes difficultés techniques, qui n'influe en rien la navigation de l'internaute. Celui-ci peine à naviguer, il le fera savoir en allant certainement voir ailleurs. Sur internet, quel que soit le domaine, ce n'est pas la concurrence qui manque.
Modifié par Mikachu (26 Sep 2007 - 20:12)
+1

Ce type de navigation peut-être tout à fait approprié en statique (pas de menu dynamique, mais un sous-menu contextuel selon l'item du menu principal)

Mais en dynamique, c'est une pure crétinerie, équivalente aux menus défilants faits avec des <marquee>.

Hum... La vérité fait parfois mal Smiley cligne
Modifié par Laurent Denis (09 Feb 2007 - 11:53)
Laurent Denis a écrit :

Mais en dynamique, c'est une pure crétinerie, équivalente aux menus défilants faits avec des <marquee>.

Oui c'est bien de le préciser, ça change tout en statique. Smiley smile
Mikachu a écrit :
Pourquoi ?



a écrit :
Dans mon cas c'est principalement parce que le sous-menu décale mon formulaire.

Donc par commodité pour toi de n'avoir pas à chercher comment empêcher ce décalage tu rends la navigation des visiteurs de ton site plus compliquée. La sensation utilisateur prime sur tes difficultés techniques, qui n'influe en rien la navigation de l'internaute. Celui-ci peine à naviguer, il le fera savoir en aillant certainement voir ailleurs. Sur internet, quel que soit le domaine, ce n'est pas la concurrence qui manque.

Mais c'est que j'aurai presque honte d'avoir osé dire que c'était pas commodité personnelle.

Bon, ben, j'ai plus qu'à chercher pourquoi c'est décalé en-dessous. Ensuite je pourrai aviser sur le meilleur des 2.
Donc par commodité pour toi de n'avoir pas à chercher comment empêcher ce décalage tu rends la navigation des visiteurs de ton site plus compliquée. La sensation utilisateur prime sur tes difficultés techniques, qui n'influe en rien la navigation de l'internaute. Celui-ci peine à naviguer, il le fera savoir en aillant certainement voir ailleurs. Sur internet, quel que soit le domaine, ce n'est pas la concurrence qui manque.

J'ai fait un menu déroulant horizontal pour le 1er niveau et vertical pour le second et les suivants.

Pour mon problème de décalage lors de l'ouverture du menu déroulant, il suffit de mettre "position: absolute;" pour le menu et c'est bon.

Maintenant, je vais essayer de le faire fonctionner sur IE, ça va être autre chose.
Sous ie il y a un truc asser drôle avec ses menus, c'est quand tu as une balise select, c'est génial! Ta balise select (sur ie) étant TOUJOURS en premier plan je te laisse imaginer le résultat.

a écrit :
Mais en dynamique, c'est une pure crétinerie, équivalente aux menus défilants faits avec des


ça c'est vite dit.. Quand tu as des centaines de rubriques les visiteurs sont trés content de pouvoir passer de l'une à l'autre sans ce taper une sous section intermédiare, de plus ça permet d'avoir un aperçu rapide de l'ensemble du site, pour rechercher une info tu vas dix fois plus vite avec un menu déroulant. Bien sur c'est un plus, c'est à dire que la navigation est la même sans js avec une étapes de plus. Et re bien sur il faut que le site contienne au moins 25 sections pour que cela est un interêt.

Faire des sites accessibles ça veut pas dire non plus faire des sites moins bien pour les 80% des gens qui naviguent de maniére "classique".
Sujet clos
Aller à