Suivez le fil RSS
 

Le DVD vidéo de Florent V. pour apprendre XHTML et CSS

Elephorm apprendre XHTML et CSS
Rechercher dans le sujet :
Forum
» Questions générales et questions de débutants
» [Résolu] Menu et sous menu horizontal
Auteur
lodan
# 09 Feb 2007 - 10:36:36
Citer
70 Posts
 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)
Parfois, lent je suis, toujours par comprendre je finis.
^
Mikachu
# 09 Feb 2007 - 10:41:55
Citer
C'est quand les vacances ?
Modérateur
4871 Posts
 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.
Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
http://www.mikachudesign.com/ 
^
Hermann
# 09 Feb 2007 - 10:44:25
Citer
Modérateur
3876 Posts
 Bonjour,
et pourtant http://css.alsacreations.com/modelesmenus/hd2.htm
et plus généralement
http://css.alsacreations.com/Galeries-de-menus-en-CSS cligne

^
Hermann
# 09 Feb 2007 - 10:47:49
Citer
Modérateur
3876 Posts
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 cligne

^
lodan
# 09 Feb 2007 - 11:03:56
Citer
70 Posts
 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
Parfois, lent je suis, toujours par comprendre je finis.
^
lodan
# 09 Feb 2007 - 11:05:22
Citer
70 Posts
 En tout cas celui-ci http://css.alsacreations.com/modelesmenus/hd2.htm[/url] est exactement ce que je veux

Merci beaucoup
Parfois, lent je suis, toujours par comprendre je finis.
^
Mikachu
# 09 Feb 2007 - 11:45:47
Citer
C'est quand les vacances ?
Modérateur
4871 Posts
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)
Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
http://www.mikachudesign.com/ 
^
Laurent Denis
# 09 Feb 2007 - 11:52:45
Citer
7979 Posts
 +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 cligne
Modifié par Laurent Denis (09 Feb 2007 - 11:53)
Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.
http://www.temesis.com 
^
Mikachu
# 09 Feb 2007 - 11:54:50
Citer
C'est quand les vacances ?
Modérateur
4871 Posts
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. smile
Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
http://www.mikachudesign.com/ 
^
lodan
# 09 Feb 2007 - 12:49:46
Citer
70 Posts
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.
Parfois, lent je suis, toujours par comprendre je finis.
^
lodan
# 10 Feb 2007 - 18:25:52
Citer
70 Posts
 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.
Parfois, lent je suis, toujours par comprendre je finis.
^
matmat
# 10 Feb 2007 - 21:45:29
Citer
1039 Posts
 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".
http://www.mozaik.com.mx msn 
^
goetsu
# 14 May 2007 - 12:09:12
Citer
294 Posts
 euh le coup du select c'est très simplement corrigeable
http://www.fairytells.net

http://www.fairytells.net 
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.7 beta in 10 ms © dew