28173 sujets

CSS et mise en forme, CSS3

Menu déroulant full horizontal ? [Résolu]

Pages :
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Re-Salut à tous, Je débute en CSS et suis à la recherche d'une solution qui me permettrai d'afficher mes sous-menus de mon menu horizontal de manière tout aussi horizontale mais évidemment décalé juste en dessous. Alors plutôt qu'une longue explication voilà ce que j'aimerai faire :
upload/15474-menu2.png
Et, dans la mesure du possible, en CSS sans javascript et compatible IE6 et FF. Alors si vous avez un bon lien ou toute autre piste, je suis preneur http://users.skynet.be/planetebleue/temp/smiley/sourire01.png
Voici mon code au cas où...
CSS

ul {
	width:750px;
	margin:inherit;
	list-style-type:none;
}
li {
	float:left;
}
ul li a {
	padding:7px 6px 5px 6px;
	float:left;
	width:100px;
	line-height: 20px;
	text-decoration:none;
	text-align:center;	
}
li.ong_bl {
	background:url(img/ong.png) no-repeat;
}
li.ong_nr {
	background:url(img/ong.png) no-repeat;
	background-position:0px -28px;
}
li.ong_nr a:hover {
	background:url(img/ong.png) no-repeat;
	background-position:0px -56px;
	color:#000;
}
ul.ssmenu {
	padding:auto;
	position:absolute;
	width:100px;
	background:#F90;
}
ul.ssmenu a:hover {
	left:auto;
	background-image:none;
}
.lien_menu1 {
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
.lien_menu2 {
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#000;
}
.lien_ssmenu1 {
	font-family:Verdana;
	font-size:10px;
	color:#FFF;
}
.lien_ssmenu1 a:hover {
	font-family:Verdana;
	font-size:10px;
	color:#000;
}

HTML

<ul>
<li class="ong_bl"><a class="lien_menu2">Accueil</a></li>
<li class="ong_nr"><a href="#" class="lien_menu1">Entreprise</a></li>
<li class="ong_nr"><a href="#" class="lien_menu1">Production</a></li>
<li class="ong_nr"><a href="#" class="lien_menu1">Création</a></li>
<li class="ong_nr"><a href="#" class="lien_menu1">Diffusion</a></li>
<li class="ong_nr"><a href="#" class="lien_menu1">Contact</a></li>
</ul>


Je suis ouvert à toute bonne critique http://users.skynet.be/planetebleue/temp/smiley/sourire01.png
Modifié par dragoeco (25 Jan 2008 - 14:22)
Par ici ensuite code source de la page puis tu regarde. J'éspère que c'est ce que tu cherchais ^^ malheureusement il y a une peu de javascript, mais rien de bien compliqué ^^ Sinon regarde ici
Modifié par Tidus_6_9_2 (21 Jan 2008 - 16:39)
Merci, j'étais déjà tombé sur ces pages car ce sont les premières qui apparaissent lorsque l'on tape "menu déroulans css" dans Google http://users.skynet.be/planetebleue/temp/smiley/sourire01.png mais j'aurai vraiment aimé me passer du JavaScript si possible. J'ai trouvé ceci qui a l'air pas mal mais qu'il faut adapter à l'horizontal et vu mes connaissances... mais bon, je vais tout de même étudier cela de plus près. Merci

Si vous avez d'autres tuyaux, suis toujours preneur... http://users.skynet.be/planetebleue/temp/smiley/alien.gif
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif J'ai trouvé d'autres tutos assez sympas ici, ici et ici mais j'ai un petit souci avec la mise en application pour mon propre menu

upload/15474-menu3.png

Sans vouloir abuser, j'ai plusieurs questions qui me turlupinent (marrant ce mot tiens) :

1 - Comme on peut le voir sur cette image, le sous menu n'est pas aligné en dessous de l'onglet auquel il est sensé être attaché. Quelle commande s'occupe de cette tâche ?
2 – Le sous-menu apparait toujours. Comment appliquer l'effet rollover ? J'ai tenté un display:none; ou left:-999px; et effectivement il n'apparait alors plus à l'écran mais il n'apparait pas non plus lorsque je survol l'onglet "Entreprise" auquel il est attaché
3 – Quel est la commande qui permettrait d'afficher le sous-menu non pas de manière verticale mais horizontale?
4 – Y'a-t-il un moyen de laisser le sous menu affiché après être sorti de la zone rollover de 'onglet ou même de temporiser la disparition du sous-menu pour quelques millisecondes?

Voici les lignes que j'ai ajouté à mon code CSS et HTML publié dans le premier post de ce topic

HTML
<ul>
 <li class="ong_bl"><a class="lien_menu2">Accueil</a></li>
 <li class="ong_nr"><a href="#" class="lien_menu1">Entreprise</a>
  <ul class="ssmenu">
   <li><a href="#" class="lien_ssmenu1">sous menu 1</a>
   <li><a href="#" class="lien_ssmenu1">sous menu 2</a>
   <li><a href="#" class="lien_ssmenu1">sous menu 3</a>  </li>
  </ul>
 </li>
 <li class="ong_nr"><a href="#" class="lien_menu1">Production</a></li>
 <li class="ong_nr"><a href="#" class="lien_menu1">Création</a></li>
 <li class="ong_nr"><a href="#" class="lien_menu1">Diffusion</a></li>
 <li class="ong_nr"><a href="#" class="lien_menu1">Contact</a></li>
</ul>

CSS
ul {
	width:750px;
	margin:inherit;
	list-style-type:none;
}
li {
	float:left;
}
ul li a {
	padding:7px 6px 5px 6px;
	float:left;
	width:100px;
	line-height: 20px;
	text-decoration:none;
	text-align:center;	
}
li.ong_bl {
	background:url(img/ong.png) no-repeat;
}
li.ong_nr {
	background:url(img/ong.png) no-repeat;
	background-position:0px -28px;
}
li.ong_nr a:hover {
	background:url(img/ong.png) no-repeat;
	background-position:0px -56px;
	color:#000;
}
ul.ssmenu {
	padding:auto;
	position:absolute;
	width:100px;
	background:#F90;
}
ul.ssmenu a:hover {
	left:auto;
	background-image:none;
}
.lien_menu1 {
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
.lien_menu2 {
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#000;
}
.lien_ssmenu1 {
	font-family:Verdana;
	font-size:10px;
	color:#FFF;
}
.lien_ssmenu1 a:hover {
	font-family:Verdana;
	font-size:10px;
	color:#000;
}

Merci de donner un peu de votre expérience à un pauvre néophyte qui est plein de bonne volonté mais souffre de son inexpérience http://users.skynet.be/planetebleue/temp/smiley/pardon01.gif Mais, promis, dès que j'aurai acquis un peu plus d'expérience, j'aiderai à mon tour ceux qui comme moi débutent en CSS http://users.skynet.be/planetebleue/temp/smiley/sourire01.png
Modifié par dragoeco (22 Jan 2008 - 15:53)
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif petite amélioration mais je suis encore loin du compte, et c'est pas faute d'avoir cherché http://users.skynet.be/planetebleue/temp/smiley/triste02.gif

J'ai obtenu ceci :

upload/15474-menu4.png
en modifiant mon CSS comme suit
ul.ssmenu {
	position:absolute;
	background:#F90;
	top:156px;
}
ul.ssmenu a:hover {
	background-image:none;
	left:auto;
}

J'ai tout repris depuis le départ et indiqué la position du sous-menu de manière artificielle (top:156) pour qu'il s'affiche à la bonne place mais doit y avoir un autre moyen plus logique à mon avis. Aller, je continue mes brico-investigations et reste à l'écoute de TOUTE proposition de votre part. Donc, merci et AU SECOURS ! Smiley lol
Il ne faut pas te leurrer sans JS un menu deroulant est actuellement irrealisable ou alors peut-etre avec flash ou sylverlight
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Merci de ton avis mais je pense personnellement le contraire. La preuve ici, ici, ici et ici. Le seul souci est la reconnaissance de la pseudo-classe :hover pour IE6 mais je compte utiliser un "Behavior" pour corriger cela et forcer IE6 à les reconnaitre (Bon, c'est pas validé W3C mias je préfère ça au JS http://users.skynet.be/planetebleue/temp/smiley/happy.gif ) le JS semble (d'après ce que j'ai pu lire sur certains post, poser quelques problèmes (référencements, accessibilité...) parfois http://users.skynet.be/planetebleue/temp/smiley/heu01.gif
Bonsoir,

psst ?

"behavior" => "js", en résumé Smiley cligne

ça ne s'appelle pas pareil, ça ne sent pas pareil, ça n'a pas la même couleur. Mais c'est la même chose, dès quon va plus plus loin que le copié collé.

Sinon, un menu dynamique exclusivement CSS, ça se fait. Un menu dynamique accessible sans js, ça ne se fait pas actuellement (ce qui veut dire durablement, en fait)

Ce n'est pas le javascript qui pose un problème d'accessibilité ou de référencement (si vous voulez des technologies posant des problèmes d'accessibilité, tournez-vous plutôt actuellement vers des standards tels que MathMl ou SVG). C'est le rôle qu'on choisit parfois de lui donner.
Modifié par Laurent Denis (23 Jan 2008 - 19:10)
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Bon ben j'ai continué mes bricolo-investigations (5 jours que je bosse sur ce *@#£µ$&§ de menu! http://users.skynet.be/planetebleue/temp/smiley/chaud01.gif ) et suis presque arrivé au résultat final recherché. Reste juste un dernier détail (c'est grave docteur?): Mon sous-menu s'affiche mais j'aimerai qu'il prenne toute la largeur du menu (750px). J'ai beau chercher mais je vois vraiment pas là... Donc, si l'un des surdoués du CSS qui fréquntent ce site a une idée à ce sujet et qu'en plus il est assez sympa pour me le dire j'en serai fort heureux? Merciiii http://users.skynet.be/planetebleue/temp/smiley/alien.gif

upload/15474-menu5.png
Voici mon code CSS
div#nav {
	width:750px;
}
div#nav ul {
	margin:inherit;
	list-style-type:none;
}
div#nav li {
	float:left;
}
div#nav li.bt1 {
	margin-left:2px;
}
div#nav li.bt1_tri {
	margin-left:2px;
}
div#nav li ul {
	position: absolute;
	display:none;
}
div#nav ul li a {
	display:block;
	padding:7px 5px 1px 5px;
	width:100px;
	line-height:20px;
	text-decoration:none;
	text-align:center;	
}
div#nav li:hover ul {
	display:block;
}
div#nav ul.lgn1 li.bt0 {
	background-image:url(img/ong.gif);
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#000;
}
div#nav ul.lgn1 li.bt1 a {
	background-image:url(img/ong.gif);
	background-position:0px -28px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
div#nav ul.lgn1 li.bt1_tri a {
	background-image:url(img/ong.gif);
	background-position:0px -84px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
div#nav ul.lgn1 li.bt1 a:hover{
	background-image:url(img/ong.gif);
	background-position:0px -56px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#333;
}
div#nav ul.lgn1 li.bt1_tri a:hover{
	background-image:url(img/ong.gif);
	background-position:0px -56px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#333;
}
div#nav ul.lgn2 {
	margin-left:0px;
}
div#nav ul.lgn2 li.bt2 a {
	background:#F90;
	padding-top:3px;
	font-family:Verdana;
	font-size:10px;
	color:#000;
}
div#nav ul.lgn2 li.bt2 a:hover{
	background:#F90;
	font-family:Verdana;
	font-size:10px;
	color:#FFF;
}


Et le HTML
<div id="nav">
<ul class="lgn1">
  <li class="bt0"><a>Accueil</a></li>
  <li class="bt1_tri"><a href="#">Entreprise</a>
    <ul class="lgn2">
      <li class="bt2"><a href="#">Historique</a>
      <li class="bt2"><a href="#">Organigramme</a>
      <li class="bt2"><a href="#">Activités</a>  
      <li class="bt2"><a href="#">Actualités</a>
      <li class="bt2"><a href="#">Recrutement</a>
      </li>
    </ul>
  </li>
  <li class="bt1"><a href="#">Production</a></li>
  <li class="bt1"><a href="#">Création</a></li>
  <li class="bt1_tri"><a href="#">Diffusion</a>
    <ul class="lgn2">
      <li class="bt2"><a href="#">Agricole</a>
      <li class="bt2"><a href="#">Espace vert</a>
      <li class="bt2"><a href="#">Jardin</a>  
      </li>
    </ul>
  </li>
  <li class="bt1"><a href="#">Contact</a></li>
</ul>
</div>
</div>
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Rhaaa ! je dois pas être loin de la solution nom d'un p'tit bonhomme. http://users.skynet.be/planetebleue/temp/smiley/colere02.gif J'ai ajouté un

div#nav li:hover ul {width:750px;}

et donc le sous-menu à maintenant la bonne largeur mais il me manque juste le dernier p'tit truc pour l'alligner au bord du div. J'ai essayé avec un left:0; mais alors là il colle au bord gauche de l'écran évidemment et non du div.
SVP, juste une petite suggestion, piste, conseil ou autre http://users.skynet.be/planetebleue/temp/smiley/triste02.gif En récompense, j'offre une belle image de Scarlett Johannson à moitié dévétue (ou Brad Pitt si vous êtes une fille) http://users.skynet.be/planetebleue/temp/smiley/sourire01.png
Modérateur
bonsoir,

div#nav {position:relative;}

et il devient la référence de positionnement pour ses enfants.

;)
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Woohoooo ! ça marche http://users.skynet.be/planetebleue/temp/smiley/content01.gif Merci infiniment gcyrillus http://users.skynet.be/planetebleue/temp/smiley/super.gif ! J'ai pas mal bossé là-dessus (J'l'ai même recommencé 3 fois) et il me manquait plus que ce petit coup de pouce final. Ouf ! Voici donc ta récompense comme promis (Je savais que ça m'aiderait ça Smiley cligne ) : image 1 - image 2 (Et oui, j'en ai promis une et ben t'en a même deux).

Bon, juste un ptit souci encore, sous FF2 j'ai un dépassement du sous menu de 40px vers la droite (il sort carrément du div) mais bon c'est un détail. Suis trop content d'avoir (pratiquement) achevé mon premier menu CSS Smiley ravi

On apprend tous les jours et donc je dirai que "c'est en forgeant qu'on devient forgeron et c'est en bossant qu'on devient moins con" Smiley lol Allé hop, v'là une affaire de résolue.
dragoeco a écrit :
Ok, mais si tu utilises FF ou Opera il me reste à corriger un débordement du ssmenu et à paufiner un peu le reste...

Oui notamment mais il faudra également faire un tour sous IE6... Smiley sweatdrop

Bon courage Smiley cligne
Helouppe, Safari and FF ! Smiley langue

Lorsque j'essaie d'accéder à ton lien, j'ai ceci

400 Bad Request
(http://hostingpool001.isp.belgacom.be/redir/users.skynet.be/planetebleue/&&&/&&&/users/3/web/00/00/15/11/67/&&&/1/&&&/0/&&&/temp/menucss/) Smiley confus

Pareil pour ton site // Fiche perso

Not Found
The requested URL /dragoeco.com was not found on this server. ( MP )
Modifié par FranZz (25 Jan 2008 - 19:50)
FranZz a écrit :
Helouppe, Safari and FF ! Smiley langue
Lorsque j'essaie d'accéder à ton lien, j'ai ceci
400 Bad Request(http://hostingpool001.isp.belgacom.be/redir/users.skynet.be/planetebleue/&&&/&&&/users/3/web/00/00/15/11/67/&&&/1/&&&/0/&&&/temp/menucss/) Smiley confus
Pareil pour ton site // Fiche perso
Not Found
The requested URL /dragoeco.com was not found on this server. ( MP )

Il n'y a pas de soucis de mon coté : Opéra9, Firefox2, IE6/7 sous windows xp.
Pour la fiche perso :
http://forum.alsacreations.com/dragoeco.com
Au lieu de :
http://dragoeco.com
Smiley cligne
C'est pas pour faire le trouble fiesta...

Mais sous Safari & FF (Mac)(minoritaires mais pas inexistants), c'est le même résultat: upload/14508-b.gif
http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif 6l20 (ça veux dire quoi ça? Ah! Secret d'état… Smiley smile ) : Oui, pour cela je compte utiliser un behavior htc, c'est pas top mais bon, les utilisateurs n'ont qu'a passer de ce navigateur archaïque à FF ou IE7 ^^

FranZz : Pour Safari, j'ai pas eu l'occasion d'essayer. Parait qu'il y a une version pour Vista maintenant? Vais essayer de trouver ça. Helouppe ? C'est quoi ça, un nouvel OS ? Smiley lol J'ai tapé ça dans Google et apparemment y'a que toi qui utilise ce mot bizarre. Pour le lien dragoeco.com, t'as raison et j'ai fais le nécessaire c-à-d juste ajouter un banal http:// devant (c'est tout con mais j'y avais pas pensé lol mais je débarque sur Alsareations aussi) Par contre mon lien pour le menu css fonctionne super bien chez moi (Sous IE7, FF et Opera). Merci pour tes encouragements Smiley cligne

Sinon, z'avez une idée d'où ça peut venir? J'ai changé la taille 750px à 100% et c'est pareil. Bon, je mange un ptit bout et j'me remets au boulot…
Modifié par dragoeco (25 Jan 2008 - 21:55)
Pages :
Sujet clos
Aller à