Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

menu déroulant bloqué

kimai

Par kimai
dans Programmation

 Partager

Messages recommandés

kimai Junior Member

kimai

Posté(e)
Posté(e)

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>

EffiK Member

EffiK

Posté(e)
Posté(e) (modifié)

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

EffiK

Posté(e)
Posté(e)

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.

kimai Junior Member

kimai

Posté(e)
  • Auteur
Posté(e)

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

EffiK Member

EffiK

Posté(e)
Posté(e) (modifié)

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
kimai Junior Member

kimai

Posté(e)
  • Auteur
Posté(e)

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

EffiK Member

EffiK

Posté(e)
Posté(e) (modifié)

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

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...