Aller au contenu
kimai

menu déroulant bloqué

Messages recommandés

bonjour à tous

j'ai inséré un menu déroulant dans mon site via golive

le problème est que le menu déroule mais ne remonte pas

il reste bloqué

il y a t il une parade???

merci d'avance

 

voici le code source

 

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="Adobe GoLive">

<title>Page sans titre</title>

</head>

 

<body bgcolor="#ffffff">

<div align="center">

 

<html>

 

<head>

<meta http-equiv="content-type" content="service,juridique,financier,travaux,conseils">

<meta name="generator" content="Adobe GoLive">

<title>conseils</title>

</head>

 

<body bgcolor="#ffffff">

<p>

<tr height="49">

<script language="javascript" src="http://127.0.0.1:1028/js.cgi?caw&r=7285"></script>

<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 {margin: 0;padding: 0;background: white;font: 80%; verdana;}

dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}

#menu {position: center;top: 0;left: 0;z-index:100;width: 640px;}

#menu dl {float: left;width: 12em;margin: 0 1px;}

#menu dt {cursor: pointer;text-align: center;font-weight: bold;background: #cccccc;border: 1px solid gray;}

#menu dd {border: 1px solid gray;}

#menu li {text-align: center;background: #c5cff5;}

#menu li a, #menu dt a {color: black;text-decoration: none;display: block;height: 100%;border: 2px solid #cccccc;}

#menu li a:hover, #menu dt a:hover {background: #4d7ab3;}

#site {position: absolute;z-index: 1;top : 70px;left : 10px;color: #eee;background-color: #ddd;padding: 5px;border: 1px solid gray;}

a {text-decoration: none;color: black;color: #222;}

-->

</style>

</head>

 

<body>

<div id="menu">

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/BasDuSite.html" target="Bas">Accueil</a></font></dd>

</dl>

<dl>

<dt onmouseover="java script:montre('smenu1');"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Services clients</font>

<dd id="smenu1">

<ul>

<li><a href="Ressources/Recherches.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Recherche perso.</font></a>

<li><a href="Ressources/Estimation.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Estimation</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover="java script:montre('smenu2');"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Navigation</font>

<dd id="smenu2">

<ul>

<li><a href="Ressources/BasDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Votre recherche</font></a>

<li><a href="Ressources/PlanDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Plan du site</font></a>

<li><a href="Ressources/MentionsLegales.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Mentions légales</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/Contacts.html" target="Bas">Contact</a></font></dd>

</dl>

</div>

</body>

 

</tr>

</p>

</body>

 

</html>

 

<p></p>

</div>

</body>

 

</html>

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut,

 

J'ai été confronté au même problèle que toi il y a peu.

Voici ma solution:

 

code java script:

 

 

 

<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>

 

 

Voici le code html pour le menu:

 

<div id="menu">

 

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/BasDuSite.html" target="Bas">Accueil</a></font></dd>

</dl>

<dl>

<dt onmouseover="montre('smenu1');" onmouseout="montre()"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Services clients</font>

<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="montre()">

<ul>

<li><a href="Ressources/Recherches.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Recherche perso.</font></a>

<li><a href="Ressources/Estimation.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Estimation</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover="montre('smenu2');" onmouseout="montre()"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Navigation</font>

<dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="montre()">

<ul>

<li><a href="Ressources/BasDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Votre recherche</font></a>

<li><a href="Ressources/PlanDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Plan du site</font></a>

<li><a href="Ressources/MentionsLegales.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Mentions légales</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/Contacts.html" target="Bas">Contact</a></font></dd>

</dl>

 

</div>

 

 

 

je viens de le tester avec ton code, ça a l'air de fonctionner.

Modifié par EffiK

Partager ce message


Lien à poster
Partager sur d’autres sites

Je viens aussi de tester avec un autre code java, ce code ne fais qu'une seul boucle au lancement de la page et traite seulement un menu à la fois pour dérouler les sous parties.

 

javascript :

<script type="text/javascript">

<!--

window.onload=cacheall;

 

function montre(id) {

var d = document.getElementById(id);

d.style.display='block';

}

 

function cacheall(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';}

}

}

 

function cache(id) {

var d = document.getElementById(id);

d.style.display='none';

}

 

 

//-->

</script>

 

html pour le menu:

<div id="menu">

 

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/BasDuSite.html" target="Bas">Accueil</a></font></dd>

</dl>

<dl>

<dt onmouseover="montre('smenu1');" onmouseout="cache('smenu1')"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Services clients</font>

<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1')">

<ul>

<li><a href="Ressources/Recherches.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Recherche perso.</font></a>

<li><a href="Ressources/Estimation.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Estimation</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover="montre('smenu2');" onmouseout="cache('smenu2')"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Navigation</font>

<dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2')">

<ul>

<li><a href="Ressources/BasDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Votre recherche</font></a>

<li><a href="Ressources/PlanDuSite.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Plan du site</font></a>

<li><a href="Ressources/MentionsLegales.html" target="Bas"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Mentions légales</font></a>

</ul>

 

</dl>

<dl>

<dt onmouseover=""><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Ressources/Contacts.html" target="Bas">Contact</a></font></dd>

</dl>

 

</div>

 

L'avantage c'est qu'il y a moins de calcul car avec la solution précédente, à chaque fois que tu pointe sur une patie du menu il lance la boucle for et fais le calcul pour chaque smenu i = [1 à 10] et pareil quand tu quite le menu.

 

Ce n'est quasiment pas perceptible mais autant économiser les ressources.

Partager ce message


Lien à poster
Partager sur d’autres sites

merci pour ces infos

mais quand je remplace mon "body" par celui que tu me donne , plus rien ne se passe,

le menu déroule meme pas

pour faire simple pourrais tu juste me filer le code htmel complet

que je fasse un copier coller

juste pour voir si ca marche?

 

merci pour ton aide en tout cas

 

PS: le problème se situait ou??

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut,

 

Je viens de regarder en détails ton code, je ne m'étais interressé que sur le javascript et le menu.

 

Il y a beaucoup d'erreur dedans, plusieurs <body>, plusieurs <head>, des tags non fermés...

 

Le problème venait du fait que tu ne prennait que le comportement "onmouseover" et tu ne fesais rien si la souris quitait la zone.

 

Voici ce que ça devrait donner avec quelquechose de propre pour le code HTML, après a toi de modifier les css pour adapter le style à ta sauce

 

 

 

tu utilise aussi <font size="1" face="Verdana, Arial, Helvetica, sans-serif"> pour presque que tout ton texte dans le menu. Le tag font n'est plus utilisé ou très peu, il vaut mieux utiiser les css.

 

 

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>TEST</title>

 

<script type="text/javascript">

<!--

 

window.onload=cacheall;

 

function montre(id) {

var d = document.getElementById(id);

d.style.display='block';

}

 

function cacheall(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';}

}

}

 

function cache(id) {

var d = document.getElementById(id);

d.style.display='none';

}

 

 

//-->

</script>

 

 

<style type="text/css">

<!--

body {

margin: 0;

padding: 0;

background: white;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 0.8em;

}

 

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

 

#menu {

margin-left: auto;

margin-right: auto;

z-index:100;

width: 640px;

}

 

#menu dl {

float: left;

width: 160px;

height: 15px;

line-height: 15px;

text-align: center;

}

 

#menu dt {

cursor: pointer;

font-weight: bold;

background: #cccccc;

border: 1px solid gray;

}

 

#menu dd {

border: 1px solid gray;

}

 

#menu li {

background: #c5cff5;

}

#menu dt:hover {

background: #eee;

}

 

 

#menu li a:hover, #menu dt a:hover {

background: #eee;

}

 

#menu a {

margin: 0;

padding: 0;

display: block;

height: 100%;

text-decoration: none;

color: #222;

}

 

-->

</style>

 

</head>

 

<body>

 

<div id="menu">

<dl>

<dt><a href="Ressources/BasDuSite.html" target="Bas">Accueil</a></dt>

</dl>

 

<dl onmouseover="montre('smenu1');" onmouseout="cache('smenu1')">

<dt>Services clients</dt>

<dd id="smenu1">

<ul>

<li><a href="Ressources/Recherches.html" target="Bas">Recherche perso.</a></li>

<li><a href="Ressources/Estimation.html" target="Bas">Estimation</a></li>

</ul>

</dd>

</dl>

 

 

<dl onmouseover="montre('smenu2');" onmouseout="cache('smenu2')">

<dt>Navigation</dt>

<dd id="smenu2">

<ul>

<li><a href="Ressources/BasDuSite.html" target="Bas">Votre recherche</a></li>

<li><a href="Ressources/PlanDuSite.html" target="Bas">Plan du site</a></li>

<li><a href="Ressources/MentionsLegales.html" target="Bas">Mentions légales</a></li>

</ul>

</dd>

</dl>

 

<dl>

<dt><a href="Ressources/Contacts.html" target="Bas">Contact</a></dt>

</dl>

</div>

 

 

<div id="site">

 

</div>

 

 

</body>

</html>

Modifié par EffiK

Partager ce message


Lien à poster
Partager sur d’autres sites

tu l'auras remarque je ne fais que m'y mettre

en tout cas je te remercie beaucoup pour tes conseils et le résultat qui en découle

 

je ne sais pas si ca pourrait teservir, mais je suis plutot calé dans les sciences

alros si tu en as besoin... n'hesites pas

merci encore

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut,

 

content que ça fonctionne.

 

Si tu te mets au develeoppement HTML/CSS, autant prendre de bonne base dès le départ.

 

je te conseil de voir les liens suivant, ils sont assez simples et permettent de faire quelque chose propre.

 

http://www.alsacreations.com/

http://wiki.media-box.net/

http://pompage.net/

Passer du HTML sauvage à XHTML et CSS sur zébulon.

 

 

Pour commencer, il faut définir la structure de tes pages, identifier les zones différente (entete, menu, colonne gauche centre droite, pied de page...)

Sur le site alsacreation, il y a plusieurs exemple de mise en pages.

 

Une fois que tu a fais t'a mise en place, tu va pouvoir completer ta page avec le contenu.

Ensuite, il faut passer au style, pour le positionnement, les couleurs...

 

Pour tester le comportement des divisions, je commence souvant par mettre une bordure rouge autour des zones que je modifie, comme ça on voit facilement le comportement de ces zones.

 

N'hesite pas demander de l'aide.

Modifié par EffiK

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×