Menu déroulant

Question

mjandia

13 Apr 2005 à 15:28

Deux questions : 1. dans dream MX lorsque je colle le code des menus déroulants cela fonctionne en prévisualisation mais en mode création les sous menus (qui se déroulent à droite) vienne cacher mon texte que du coup j'ai du mal à modifier. Comment faire ? 2. je voudrais copier les mêmes menus déroulants trouver dans les colones de ce site mais avec des sous menus qui se déroulent à gauche (pour les menus de droite) ? Merci.

jeff

13 Apr 2005 à 15:32

bonjour!!!

dominique

13 Apr 2005 à 15:35

Bonjour aussi mjandia et bienvenue Smiley smile

Visiblement, tu n'as pas lu les règles du forum
Je t'y invite donc... As-tu regardé dans les tutoriels s'il n'y a pas réponse à tes questions ? Smiley cligne

Macpom

13 Apr 2005 à 18:08

Bonjour !
Et as-tu essayé de voir si tu ne pouvais pas modifier quelque chose en css, en donnant une classe droite / classe gauche, à tes menus ?

mjandia

13 Apr 2005 à 18:17

Je suis plus que débutant (pour l'instant je n'ai fait que du copier-coller) ceci dit, j'ai réussi à changer les couleurs et à ajouter dans le menu et les sous menus des choix supplémentaires. Comme je ne connais pas les commandes du style pading-right : 3px j'ai du mal. et en plus j'ai un autre problème (après avoir lu les tutotiaux) lorsque j'insère un nouveau code de menu déroulant il vient s'ajouter à l'autre ménu déroulant ou l'annule etc...

Macpom

13 Apr 2005 à 18:21

ok ; Mais à quand "Bonjour" ????????
il faut être "rigoureux" et "logique" (et "respectueux"), dans tes emboîtements pour qu'ils soient efficaces. Sinon, c'est le mélange, et donc la panique (qui t'empêcherait de dire "Bonjour" ???)...

mjandia

13 Apr 2005 à 18:25

pardon bonjour

dominique

13 Apr 2005 à 18:26

Voilà qui est mieux, l'échange va devenir plus convivial Smiley smile

mjandia

13 Apr 2005 à 19:59

Alors pourquoi lorsque je mets un 2ème menus déroulant, il vient se mettre sur l'autre ?

Groumphy

16 Apr 2005 à 08:40

Hello,

Pour pouvoir te répondre avec précision, et certainement pour corriger les erreurs, il est important que tu fournisses soit le code source qui pose problème (n'oublie pas la mise en page via les balise CODE) ou encore mieux : une page d'essais en ligne ! De ce fait, nous aurons tous les éléments clés en mains pour pouvoir regarder et évidemment te répondre optimalement.

Dans l'attente de te lire, bonne journée,

mjandia

18 Apr 2005 à 16:16

Je vous donne le code du menu vertical puis du menu horizontal :

Dans le head


<META http-equiv=Content-Type content="text/html; charset=iso-8859-1" />
<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 90%; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	LEFT: 1em;
	WIDTH: 10em;
	POSITION: absolute;
	TOP: 1em;
	background-color: #FFFFFF;
}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #FFFFFF; MARGIN: 2px 0px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; MARGIN-TOP: -1.4em; Z-INDEX: 100; BACKGROUND: #FFFFFF; LEFT: 8em; BORDER-LEFT: gray 1px solid; WIDTH: 10em; BORDER-BOTTOM: gray 1px solid; POSITION: absolute
}
#menu UL {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
#menu LI {
	FONT-SIZE: 85%; LINE-HEIGHT: 18px; HEIGHT: 18px; TEXT-ALIGN: center
}
#menu LI A {
	DISPLAY: block; COLOR: #FFFFFF; TEXT-DECORATION: none
}
#menu DT A {
	DISPLAY: block; COLOR: #FFFFFF; TEXT-DECORATION: none
}
#menu LI A:hover {
	TEXT-DECORATION: underline
}

}
</STYLE>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR />
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1" />
<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 90%; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	LEFT: 3px;
	WIDTH: 181px;
	POSITION: absolute;
	TOP: 174px;
	background-color: #FFFFFF;
	height: 198px;
}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #FFFFFF; MARGIN: 3px 0px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid;
	BORDER-TOP: gray 1px solid;
	MARGIN-TOP: -1.4em;
	Z-INDEX: 100;
	BACKGROUND: #990000;
	LEFT: 8em;
	BORDER-LEFT: gray 1px solid;
	WIDTH: 237px;
	BORDER-BOTTOM: gray 1px solid;
	POSITION: absolute;
}
#menu UL {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
#menu LI {
	FONT-SIZE: 85%; LINE-HEIGHT: 18px; HEIGHT: 18px; TEXT-ALIGN: center
}
#menu LI A {
	DISPLAY: block; COLOR: #FFFFFF; TEXT-DECORATION: none
}
#menu DT A {
	DISPLAY: block; COLOR: #990000; TEXT-DECORATION: none
}
#menu LI A:hover {#0000CC
	TEXT-DECORATION: underline
}

}
</STYLE>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR />

[b]Dans le body :[/b]

<DT onmouseover="javascript:montre('smenu6');">A NOTRE PROPOS</DT>
<DD class="Style59" id=smenu6 onmouseover="javascript:montre('smenu6');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="A%20notre%20propos.htm">A
notre propos</A> <A href="Conditions%20d%27utilisation.html">Conditions
d'utilisation</A> </LI>
<LI><A href="Info%20%E9diteur.html">Infos
Producteur de la base de données</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu1');">CONCURRENCE</DT>
<DD id=smenu1 onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="Abus%20de%20position%20dominante.html">Editorial</A> </LI>
<LI><A href="Abus%20de%20position%20dominante.html">Abus
de position dominante</A> <A href="Concurrence%20d%E9loyale.html">Concurrence
déloyale</A> <A href="Prix%20abusivement%20bas.html">Prix
abusivement bas</A> <A href="Pratiques%20abusives.html">Pratiques
abusives</A> </LI>
<LI><A href="Transparence%20tarifaire.html">Transparence
tarifaire</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu5');">INDICE ET TAUX</DT>
<DD id=smenu5 onmouseover="javascript:montre('smenu5');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="Indices%20et%20taux.html">Indice
et taux</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu2');"
onmouseout=javascript:montre();>CONSOMMATION</DT>
<DD id=smenu2 onmouseover="javascript:montre('smenu2');"
onmouseout=javascript:montre(); name="smenu2">
<UL>
<LI><A href="Carte%20bancaire.html">Editorial</A> </LI>
<LI><A href="Carte%20bancaire.html">Carte
bancaire</A> </LI>
<LI><A href="Cheque.html">Chèque</A>
</LI>
<LI><A href="Inexecution%20contractuelle.html">Inexécution
contractuelle</A> </LI>
<LI><A href="Caution.html">Caution</A>
</LI>
<LI><A href="Avis%20%E0%20tiers%20d%E9tenteur.html">Avis
à tiers détenteur</A> </LI>
<LI><A href="Clause%20de%20responsabilite.html">Clause
de responsabilité</A> </LI>
<LI><A href="Contrat%20et%20consentement.html">Contrat
et consentement</A> </LI>
<LI><A href="Etiquetage.html">Etiquetage</A>
</LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu3');"
onmouseout=javascript:montre();>DOSSIER PRATIQUE </DT>
<DD id=smenu3 onmouseover="javascript:montre('smenu3');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="Avis%20%E0%20tiers%20d%E9tenteur.html">Avis
à tiers détenteur</A> <A href="Etiquetage.html">Etiquetage</A>
<A href="Transparence%20tarifaire.html">Transparence tarifaire</A>
<A href="Base%20de%20donn%E9es.html">Base de données</A> <A href="La%20fiscalite%20de%20la%20micro%20entreprise.html">La
fiscalité de la micro entreprise</A> </LI>
<LI><A href="La%20facturation.html">Facturation</A>
</LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu4');"
onmouseout=javascript:montre();>VIE PRATIQUE </DT>
<DD id=smenu4 onmouseover="javascript:montre('smenu4');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="Vie%20pratique,%20le%20mediateur%20de%20la%20republique.html">Le
médiateur de la république</A> </LI>
<LI><A href="Vie%20pratique,%20Voyages%20%20responsabilites.html">Responsabilité
des agences de voyages</A> </LI>
<LI><A href="Vie%20pratique,%20droit%20des%20voyageurs%20embarquement%20annulation%20retard.html">Voyage
et indemnisation</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu7');"
onmouseout=javascript:montre();>CODE DE LOI </DT>
<DD id=smenu7 onmouseover="javascript:montre('smenu7');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Code de loi (Légifrance)</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu8');"
onmouseout=javascript:montre();>PROPRIETE INTELLECTUELLE </DT>
<DD id=smenu8 onmouseover="javascript:montre('smenu8');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Marque</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Droit d'auteur</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Base de données</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu9');"
onmouseout=javascript:montre();>JURISPRUDENCE </DT>
<DD id=smenu9 onmouseover="javascript:montre('smenu9');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Accueil</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Propriété intellectuelle</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Fiscalité</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Banque</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Travail</A> </LI>
</UL>
<DT onmouseover="javascript:montre('smenu10');"
onmouseout=javascript:montre();>ARCHIVES </DT>
<DD id=smenu10 onmouseover="javascript:montre('smenu10');"
onmouseout=javascript:montre(); name="smenu10">
<UL>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Bibliothèque juridique 2005</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Bibliothèque juridique liée</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Archives 2004</A> </LI>
<LI><A href="http://www.legifrance.gouv.fr/WAspad/ListeCodes" target="_blank">Archives 2003</A> </LI>
</UL>
</DD>
</DL>

Ensuite le menu horizontale dans le head


<TITLE>Menu déroulant horizontal</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	Z-INDEX: 100; LEFT: 255px; WIDTH: 154px; POSITION: absolute; TOP: 16px}
#menu DL {
	FLOAT: left; WIDTH: 12em
}
#menu DT {
	BORDER-RIGHT: Bordeaux wine 1px solid; BORDER-TOP: Bordeaux wine 1px solid; FONT-WEIGHT: bold; BACKGROUND: #990000; MARGIN: 1px; BORDER-LEFT: Bordeaux wine 1px solid; CURSOR: pointer; BORDER-BOTTOM: Bordeaux wine 1px solid; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
	BACKGROUND: #fff; TEXT-ALIGN: center
}
#menu LI A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #990000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #990000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
	BACKGROUND: #eee
}
#menu DT A:hover {
	BACKGROUND: #eee
}
#site {
	BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; Z-INDEX: 1; LEFT: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; COLOR: #990000; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #ddd
}
.mentions {
	LEFT: 10px; COLOR: #000; POSITION: absolute; TOP: 300px; BACKGROUND-COLOR: #ddd
}
.Style2 {
	color: #FF9933;
	font-size: 10px;
}
.Style9 {font-size: 11px}
.Style10 {color: #CCCCCC}
</STYLE>

<META content="MSHTML 6.00.2900.2604" name=GENERATOR>

[b]et dans le body [/b]

:
<DIV id=menu>
<DL>
<DT class="Style2 Style9" onmouseover="javascript:montre('smenu1');">Accueil
<DD id=smenu1><UL><LI><A href="">Accueil</A>
<LI><A href="">Contact</A>
<LI><A href="" class="Style10">Espace professionnel</A>
<LI><A href="">Aide</A> </LI></UL></DD></DL>
</DIV>

mjandia

18 Apr 2005 à 16:17

au fait bonjour et merci de vos efforts

Sujet clos