Menu déroulant

Fermé
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 - 30 oct. 2007 à 11:15
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 - 31 oct. 2007 à 15:13
Bonjour,
J'ai trouver dans le forum des adresses où télécharger des scripts de menu déroulant. Je cherchais un menu déroulant en html, je l'ai enfin trouvé. Sauf quand je le mets dans un fichier html vierge il fonctionne parfaitement, dès que je l'introduis dans ma page et à l'endroit exact où il doit être, il reste ouvert; ma page est composée de tables.
Que dois-je faire pour que cela fonctionne aussi dans ma page ?
Merci pour toute réponse
Cordialement
A voir également:

12 réponses

Utilisateur anonyme
30 oct. 2007 à 11:23
tu devrais nous donner un bout de ton code pour qu'on puisse mieux voir le problème...

ton code a certainement une partie en css et peut etre une autre en javascript, il faudrai voir si ces deux langages sont bien mis a leur place...
0
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
30 oct. 2007 à 13:43
Bonjour Flounch22,
Je te remercie de vouloir m'aider pour mon petit problème. Je ne suis pas une professionnelle, bien que je me sois débrouillée pour créer mon site, mais en html.
Tu me dis de t'envoyer un bout, quel bout je t'envoie, car c'est tellement long. Je te dis ce que je vois et tu me diras quelle partie pourrait t'intéresser.
Il ya le titre, suivi de <style type="text/css"> </style>
<script type=text/javascritp> </scritp>
Body, suivie de la table. Tbody suivi d'un td, d'un ul. Un autre td commence le 2ème colonne de la table.
Je suis désolée. J'espère que je ne t'ai pas trop embrouillé.
Merci d'avance
0
Jean_2 Messages postés 245 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 13 septembre 2013 12
30 oct. 2007 à 14:30
2 choses à donner tout d'abord :

- dans la balise script, tu reprends la fonction concernant ton menu déroulant (si tu en a mis une, tu sauras quoi)
- tu montre aussi le code html correspondant à ton menu (certainement pas trop loin du début du body...). si t'es sous dreamwever en creation, selectionne ton menu, et passe en mode code (vérifie bien de tout mettre)

est-ce que tes balises sont toutes bien fermées ???
0
Utilisateur anonyme
30 oct. 2007 à 14:59
si tu peu nous donner le script entier que tu as trouvé je pourrai plus t'aider...

tu di que quand tu y met dans une page blanche ca marche impec mais dès que tu y met a l'interieur de ta page web il marche plus, c'est certainement du au code qui est mal placé ou du moins une erreur quand tu l'insère.

l'idéal ca serai d'avoir le code de base plus le code de ta page en nous indiquant ou tu veu que le menu apparaisse
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
30 oct. 2007 à 15:40
Bonjour,
Sincèrement je vous félicite de vouloir aider quelqu'un qui ne sait pas lire ce genre de language. J'espère que cela ne sera trop ardu pour vous. Toutes les balises sont fermées. N'oublies pas que cela fonctionne parfaitement quand c'est un fichier vierge; c'est la table qui pose problème, car c'est la seule chose que j'ai rajouté. Je n'ai pas modifié le script car il me convient ; la seule chose que je modifierai plus tard ce sont les titres.
Il y 5 fonctions dans le <script type> : funtion treeMenu_init(menu, data) ; function treeMenu_handleClick(event) ; function treMenu_getClasses (event, current target) ; function treeMenu_contains (array,element) ; function treMenu_store (menu). .Je ne sais pas lequel je dois t'envoyer.
Cette partie du language html est le début de body :
<body>
<table style="text-align: left; width: 600px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 200px; vertical-align: top;">
<h1>Organismes vivants</h1>
<ul id="vivants">
<li>
<div><span class="childs">Animaux</span></div>
<ul>
<li>
<div><span class="childs">Mammifères</span></div>
<ul>
<li>
<div><span>chien</span></div>
</li>
<li>
<div><span>chat</span></div>
</li>
<li class="fin">
Il représente le 1er multi-niveau. Les autres se ressemblent comme des gouttes d'eau. J'espère c'est ce que tu veux.
Je ne connais pas dreamwever; je travaille sous nvu. Sinon, je peux vous l'expédiez sous forme de .rar
Merci pour tout
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
30 oct. 2007 à 15:59
salut

Non le mieux est quand même de faire un copié coller de tout le code :) 100% du début à la fin ,
0
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
30 oct. 2007 à 16:38
Rebonjour,
Ci-joint le code tout entier. C'est une page d'essai avec la même structure que ma vraie page, car la vraie fait plus 500Mo. Mes pages sont composées d'une table avec 3 colonnes. Cet essai d'une table avec 3 colonnes.
Merci d'avance
Voice le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>essai10</title>
<style type="text/css">
/* Formatage de l'arbre */
@import url(arbre.css) screen, projection;
span.childs {
cursor: pointer;
}
/* Classes pour ouvrir et fermer un noeud */
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
<script type="text/javascript">
/*
* Ajoute les gestionnaires d'événement et classes CSS
aux éléments de liste, pour fermer les points du menu au départ.
*
* menu: référence à la liste
* data: chaîne qui contient les numéros des points déroulés du menu, .
*/
function treeMenu_init(menu, data) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
if(array.length > 0 && array[0] == i) {
array.shift();
}
}
}
}
/*
* Modifie la classe d'un point du menu qui a été cliqué, de sorte que les points du menu ouverts
* puissent être fermés et que les point fermés puissent être ouverts.
*
* event: l'objet Event transmis par le navigateur.
*/
function treeMenu_handleClick(event) {
if(event == null) { //solution de rechange pour les propriétés DOM faisant défaut dans l'IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}
/*
* Renvoie toutes les classes affectées à un élément HTML
*
* element: l'élément HTML
* return: les classes affectées
*/
function treeMenu_getClasses(element) {
if(element.className) {
return element.className.match(/[^ \t\n\r]+/g);
}
else {
return new Array(0);
}
}
/*
* Vérifie si un tableau contient un élément déterminé.
*
* array: le tableau
* element: l'élément
* return: true, si le tableau contient l'élément.
*/
function treeMenu_contains(array, element) {
for(var i = 0; i < array.length; i++) {
if(array[i] == element) {
return true;
}
}
return false;
}
/*
* Renvoie une chaîne de caractères dans laquelle figurent tous les
* points du menu ouverts.
*
* menu: référence à la liste
* return: la chaîne de caractères
*/
function treeMenu_store(menu) {
var result = new Array();;
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
result.push(i);
}
}
return result.join(" ");
}


</script>
</head>
<body>
<table style="text-align: left; width: 600px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 200px; vertical-align: top;">
<h1>Organismes vivants</h1>
<ul id="vivants">
<li>
<div><span class="childs">Animaux</span></div>
<ul>
<li>
<div><span class="childs">Mammifères</span></div>
<ul>
<li>
<div><span>chien</span></div>
</li>
<li>
<div><span>chat</span></div>
</li>
<li class="fin">
<div><span>cheval</span></div>
</li>
</ul>
</li>
<li class="fin">
<div><span class="childs">Poissons</span></div>
<ul>
<li>
<div><span>brochet</span></div>
</li>
<li class="fin">
<div><span>anguille</span></div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div><span class="childs">Plantes</span></div>
<ul>
<li>
<div><span>lichen</span></div>
</li>
<li class="fin">
<div><span>algues vertes</span></div>
</li>
</ul>
</li>
<li class="fin">
<div><span class="childs">Champignons</span></div>
<ul>
<li class="fin">
<div><span>fausse oronge</span></div>
</li>
</ul>
</li>
</ul>
<h1>sciences</h1>
<ul id="sciences">
<li>
<div><span class="childs">Sciences
naturelles</span></div>
<ul>
<li>
<div><span>physique</span></div>
</li>
<li class="fin">
<div><span>biologie</span></div>
</li>
</ul>
</li>
<li>
<div><span class="childs">Sciences de
l'ingéniérie</span></div>
<ul>
<li>
<div><span>électrotechnique</span></div>
</li>
<li class="fin">
<div><span>construction mécanique</span></div>
</li>
</ul>
</li>
<li class="fin">
<div><span class="childs">Sciences
culturelles</span></div>
<ul>
<li>
<div><span>histoire</span></div>
</li>
<li class="fin">
<div><span>linguistique</span></div>
</li>
</ul>
</li>
</ul>
</td>
<td style="width: 200px; vertical-align: top;">
<p class="pargraphe2">Depuis des siècles,
notre Intelligence nous a permis d'évoluer,
d'améliorer sans cesse nos conditions de vie.</p>
<p class="pargraphe2">Et pourtant, devant faire face
aux nombreuses perturbations de leur quotidien, aux tensions de plus en
plus grandes au sein de leur environnement, des milliers de personnes
aspirent à une autre vie. </p>
<p class="pargraphe2">Certains cherchent de
nouvelles possibilités pour une vie positive,
harmonieuse et respectueuse.</p>
<p class="pargraphe2">D'autres veulent la
santé, la réussite financière...</p>
<p class="pargraphe2">Aucun de ces désirs
n'est à refouler, car l'être humain est
né pour être heureux.</p>
</td>
<td style="width: 200px; vertical-align: top;"><img
style="width: 154px; height: 30px;" alt="actualite"
src="../images/actualite.gif" /><br />
</td>
</tr>
</tbody>
</table>
<br />
</body>
</html>
0
Utilisateur anonyme
30 oct. 2007 à 16:55
merci c'est bcp plus simple avec le code :-)

je voi dans le code que tu importe une feuille de style nommée "arbre.css", est-ce une des tiennes ou bien est-elle dans le script que tu as pris? et si oui as tu bien crée cette page css? et est-elle bien dans le meme repertoire?

sinon tu peu regarder le code source de la page ou tu as trouvé le script ca pourra peut etre t'aider...
0
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
30 oct. 2007 à 18:37
Bonsoir,
Je donne ma langue au chat. J'ai pris la source telle que tu la vois.J'ai voulu trouver un script où il n'y a aucune page à créer à côté.
La 1ère question que je me pose pourquoi ce script fonctionne tel quel quand je le mets dans une page html vierge et dès que je le mets dans une page avec des tables, tout a l'air normal sauf que les sous-menus restent ouverts, pourtant il a bien été créé pour être intégré ?
cette feuille de style "arbre.css" fait partie du script
J'en ai créé des feuilles de style dans mes pages html, mais celui-là je ne sais pas de quel paramètres il s'agit, ils ne disent rien sur le site.
Est-ce vous pourriez m'expliquer comment je crée cette page .css. Ce truc devrait fonctionner sans problème et pourtant !
Si celu-ci refuse catégoriquement de marcher, j'en ai trouver un autre, il fonctionne lui dans les tables, sauf que il manque une partie (bien entendu je ne sais pas l'écrire) ; j'ai 4 menus et divers sous-menus, en cliquant sur le menu 2 par exemple, il ne se ferme pas en recliquant dessus ; pour le fermer il faut cliquer sur le menu 3 ou 4, si bien qu'il y a toujours un menu qui reste ouvert, ce n'est pas très élégant.
j'essaye beaucoup, j'espère en venir à bout.
Merci pour tout
Cordialement
0
Utilisateur anonyme
30 oct. 2007 à 19:44
ok c'est vrai que quand tu l'insère dans un page blanche ca marche ok donc je pense pas que ca vienne de "arbre.css"
donc ton erreur est forcement dans la facon dont tu l'a inséré,

pour trouver l'erreur va faire un tour sur validator: http://validator.w3.org/

sinon installe firebug qui est un modul a ajouter a firefox et montre toutes les erreurs kil y a sur une page: https://www.hugedomains.com/domain_profile.cfm?d=geckozone&e=org


je te file un lien qui parle de differents menus, peut etre que tu y retrouvera ton bonheur
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
0
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
31 oct. 2007 à 11:33
Bonjour à tous,
J'ai trouvé la solution. J'ai viré le script qui ne marchait pas, ai téléchargé un autre, créé une feuille de style externe (avec la feuille interne cela ne fonctionne pas) et mon menu est ok.
Merci d'avoir été si patients, j'ai apprécié. Vous m'avez mis sur la bonne voie.
Bonne journée à tous
Cordialement
0
guenievr Messages postés 52 Date d'inscription lundi 10 septembre 2007 Statut Membre Dernière intervention 21 janvier 2010 1
31 oct. 2007 à 15:13
Bonjour,
J'ai encore une autre question à poser concernant le menu déroulant. Il y a-t'il des limites de niveaux ? Je vais essayer d'être plus claire
J'ai menu 1, 2, 3 avec des sous-menus. Là où j'ai un petit problème arrivé à 11, le menu reste ouvert; j'ai vérifié plusieurs fois il n'y a pas d'erreur. La seule explication c'est limité à 10. J'ai au total 14 menus; comment passer outre ?
Merci d'avance
Cordialement
0