Créer un menu déroulant horizontale

Diogene · Message par **Diogene** » 10 sept. 2007, 22:31

Salut,

je suis entrain d'essayer de faire un menu déroulant pour mon site mais ca me pose quelques probleme

pas la peine de me donner un lien vers alsacecreation ou autre car le probleme n'est pas (enfin je pense) dans le menu en lui meme car j'ai bien compris (du moins un minimum) quelle ballises utiliser pour faire un menu avec des sous menu etc...mais plutot dans l'intégration du menu sur mon site.

je voudrais avoir une barre centrer horizontalement sur ma page et dedans mes différent menu, voici en gros à quoi ca devrait ressembler :

je voudrais qu'en passant sur le mot un sous menu apparaisse mais malheureusement soit le menu est ailleurs que dans ma barre ou alors les sous menu sont apparrant dans la barre

. Voici le code css de ma barre :

Code : Tout sélectionner

#centre { border: 4px ridge #82373c;
width: 33%;
float: left;
font-family: Calibri;
background-image: url(images/fond%20tableau.jpg);
background-attachment: fixed;
background-position: center;
color: #ffffff;
text-align: center;
}

est ce qu'il m'est donc possible de juste inserer un menu avec des sous menu dans ma barre ou dois je proceder autrement ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Message par **chinon37** » 11 sept. 2007, 07:59

Il faudrait le code de la page: le css ne suffit pas. Le menu est fait à partir d'une liste, d'un tableau?

Do-IT · Message par **Do-IT** » 11 sept. 2007, 09:12

De mémoire, je crois me souvenir que c'est pas possible d'avoir un menu déroulant centré en css.
Car comme le menu est centré, il n'est pas à une position fixe (lapalissade). Quoique.
Hors pour ouvrir un menu déroulant il faut connaitre la position de menu. Tout le monde à compris ?
Si ca se trouve je raconte des conneries !

Et j'ai pas mis de lien, comme demandé.

Diogene · Message par **Diogene** » 11 sept. 2007, 10:14

chinon37, voilà le code de ma page :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Accueil</title>
<style type="text/css">
@import "Barre.css";
</style></head><body
 style="background-attachment: fixed; background-position: center; background-image: url(http://kungfuclubbaulois.free.fr/images/fond%20du%20site.jpg);"><div
 id="conteneur"><img style="width: 800px; height: 100px;"
 alt="Kung Fu Club Baulois"
 src="images/Kung%20Fu%20Club%20baulois%20-%20en%20tete.jpg"><br><br><div
 id="news"><marquee behavior="scroll"
 onmouseover="this.stop();" onmouseout="this.start();"
 scrollamount="3" scrolldelay="3" direction="left"
 height="20"><nobr><span class="font-size:medium">les
horaires d'entrainements sont : Lundi : Tai chi chuan - 20h à 21h /
Mardi : Sanshou/Sanda - 20h à 21h30 / Vendredi : Tao-lu/armes - 20h à
21h30 </span></nobr></marquee></div><br><br><div
 style="width: 210px;" id="gauche"><script
 type="text/javascript" src="datedujour.js"></script></div><div
 style="margin-left: 5px; width: 346px;" id="centre">centre</div>
<div style="margin-left: 5px; width: 210px;" id="droite"><script
 type="text/javascript" src="heuredujour.js"></script><div
 id="heure_dyna" style="position: relative;">Chargement
en jours...</div></div>
<br><br></div></body></html>

Do-IT : se serait vraiment sans intéret dans ce cas si l'on ne pouvait pas le mettre ou l'on veut, regarde sur ce site il n'est pas en haut de page.

sinon pour les liens je disais ca pour pas que vous me renvoyez sur un lien qui montre comment faire un menu déroulant hein si c'est une autre raison y a pas de soucis

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Message par **chinon37** » 11 sept. 2007, 10:44

ce code n'avance pas à grand chose: le menu qui pose problème n'est pas dedans pour voir le problème...

Diogene · Message par **Diogene** » 11 sept. 2007, 11:01

ah désolé

, j'ai essayé avec celui d'alsacreations ou avec celui de marcrea mais pour les deux cela me donne ca :

[Modo: merci d'être vigilant dans la rédaction de tes messages et particulièrement en cas d'URL > la syntaxe est:
[url=*adresse du site*]*nom du lien[/url]
c'est un = et non un crochet fermant avant l'adresse du site. L'erreur bloque l'affichage de ton message!!]
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

MagLaGrenouille · Message par **MagLaGrenouille** » 16 sept. 2007, 14:20

Pour mettre ton menu en centre de page, peut-être utiliser

Code : Tout sélectionner

position : absolute

et donner des valeurs afin de le positionner précisément.
Ensuite, pour que toute la page ne se décale pas avec le menu déroulant quand tu le survoles, le mettre en

Code : Tout sélectionner

z-index :5

par exemple.
Ceci dit, l'explication de ton problème ne me paraît pas clair... tu ne voudrais pas faire une capture d'écran du comportement que tu obtiens et les codes correspondant, côté html? Je ne m'y connais pas assez mais j'ai fait des menus déroulants sur mon site, et bien qu'il ne soit pas extraordinaire, ça fonctionne (tout du moins, à mon goût).
Et aussi, pour pouvoir comprendre comment fonctionne un menu déroulant qui te conviendrait sur un site donné, utilise le plug-in Web developer de Mozilla Firefox

C'est de cette façon-là que je déchiffre (on va dire) ce qui m'intéresse et que j'essaie ensuite de reproduire les mêmes comportements (ou pas, selon mes désirs)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Diogene · Message par **Diogene** » 16 sept. 2007, 18:26

J'ai réussi en tatonnant à faire quelques modifs que je souhaitais, il me reste juste à mettre un cadre autour du menu principal. Quand j'en mets un et que je déploie un sous menu cela encadre les sous menu, je ne vois pas ou se situe le probleme

.

Voici mon menu modifier :

et voici le code css et le code html :

Code : Tout sélectionner

/* Barre de menu du site */

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0px;			
left: 0px;
z-index:100;
}
#menu dl {
float: left;
color: #ffffff;		
width: 6em;
}
#menu dt {
cursor: pointer;
text-align: center;
background: #82373c;
}
#menu dd {
display: none;
}
#menu li {
text-align: center;
background: #82373c;
border: 4px ridge #82373c;
margin-top: 3px;
}
#menu li a, #menu dt a {
color: #ffffff;				
text-decoration: none;
display: block;
height: 1%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #82373c;
}

Code : Tout sélectionner

<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>

si quelqu'un voit comment faire ?
MagLaGrenouille, merci pour le conseille je vais essayer le plugin firefox

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Diogene · Message par **Diogene** » 24 sept. 2007, 11:11

un petit up svp

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Message par **Ymai** » 25 sept. 2007, 00:08

Bonjour
Je ne vois pas, dans le code, comment est fait ce cadre autour du menu...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)

Diogene · Message par **Diogene** » 02 oct. 2007, 18:08

Salut,

si tu veux parler des sous menus c'est dans ce bout de code à la ligne "border" :

Code : Tout sélectionner

#menu li {
text-align: center;
background: #82373c;
border: 4px ridge #82373c;
margin-top: 3px;
}

sinon pour le menu principal bah c'est justement ce que je cherche à faire

, personne n'a une idée

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

MagLaGrenouille · Message par **MagLaGrenouille** » 02 oct. 2007, 21:39

Eh bien si je ne me trompe pas, tu donnes les caractéristiques de ta bordure dans le code suivant:

Code : Tout sélectionner

#menu {
top: 0px;         
left: 0px;
z-index:100;
border: /*propriétés que tu veux*/
}

Enfin demande confirmation aux grands, on ne sait jamais

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Diogene · Message par **Diogene** » 04 oct. 2007, 21:41

j'avais essayé ca aussi et voilà ce que j'obtiens

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

MagLaGrenouille · Message par **MagLaGrenouille** » 05 oct. 2007, 10:09

Ca vient peut-être du fait que quand on fait un cadre tout autour du menu, il faut bien tenir compte de la largeur de chaque liste, et composer en fonction de ça la largeur de chaque bordure pour que ça ne décalle pas le tout. Je sais que ce n'est pas très clair dit comme ça, mais je crois que le mieux, c'est que tu tâtonnes au fur et à mesure et que tu observes le résultat à chaque changement de valeur pour les bordure et les cadres...

Enfin, disons que le mieux vraiment, c'est de calculer la largueur voulue pour ton menu, et elle doit rester la même quand il se déroule et quand il est non déroulé... Arf, je m'exprime mal...

Mettons, la largeur totale de ton menu déroulant doit faire 100 pixels et tu as 5 rubriques. Au départ, logiquement, tu vas donner comme propriété 20px de largeur pour chaque cellule.
Mais, à partir du moment où tu mets une bordure, celle-ci va s'ajouter à la valeur globale du menu.
Pour 5 cellules, il y a donc 2 bordures extérieures, et 4 intérieures, soit 6 au total, tu dois donc tenir compte de la largeur de ces bordures pour redéfinir la taille de tes cellules et conserver ton menu sur une seule ligne d'une largeur de 100px. Euh, je ne vais pas te faire le calcul, d'abord parce que je n'ai pas trop le temps (pardon) et qu'en plus, moi-même mettant du temps à le faire pour moi, je t'en laisse le plaisir.
J'espère que cela était plus clair, sinon il faut s'agenouiller devant les anciens, prier le ciel et demander encore des explications

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Geckozone

Créer un menu déroulant horizontale

Créer un menu déroulant horizontale

Qui est en ligne ?