all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le jeudi 20 novembre 2008 à 11 h 48 par Number.

Bonjour,

Je poste un nouveau sujet car le problème est récurant dans l'utilisation de DOM.

J'ai une structure de menu (Style explorateur windows) qui est la suivante :

<ul id="menu"> //Qui englobe tout le menu <li class="moin"> // Menu ouvert <a href="#">Accueil</a> // Titre global <ul id="Couche0"> // Englobe le sous menu Accueil <li>Sous Menu 1</li> <li>Sous Menu 2</li> </ul> </li> <li class="moin"> // Menu ouvert <a href="#">Forum</a> // Titre global <ul id="Couche1"> // Englobe le sous menu Accueil <li>Sous Menu 1</li> <li>Sous Menu 2</li> </ul> </li> </ul>

Est ainsi de suite, si je veux ajouter une action sur les liens pour développer le menu je fait ainsi :
function InitMenu() { var i,menu; var Couche = 0; if(document.getElementsByTagName) { var menuElements = document.getElementById("menu").getElementsByTagName("a"); for(i=0; menuElements[i];i++) { if(menuElements[i].className && (menuElements[i].className.indexOf("menu") != -1)) { menuElements[i].onclick=function() { ShowMenu(this) }; if(menuElements[i].parentNode.className == "plus") { document.getElementById("Couche" + Couche).style.display="none"; } else { document.getElementById("Couche" + Couche).style.display="block"; } Couche++; } } } }
Déjà, suis-je obliger de parcourir tout les liens ? Sachant que ceux qui m'intéresse ne sont que ceux précédent une Couche.

Et ensuite dans ShowMenu() :
function ShowMenu(Obj,option) { var couche = Obj.nextSibling.nextSibling; if(couche.style.display == "block") { StyleDisplay = "none"; StyleImg = "plus"; } else { StyleDisplay = "block"; StyleImg = "moin"; } if(option != undefined) { StyleDisplay = (!option)? "none": "block"; StyleImg = (!option)? "plus":"moin"; } couche.style.display = StyleDisplay; couche.parentNode.className = StyleImg; }

C'est ici que j'ai un problème :
Le :
var couche = Obj.nextSibling.nextSibling;
n'est pas vraiment élégant, et surtout pas très propre.
J'ai été obligé de faire ainsi, car dans DOM entre mon lien et ma liste (Couche) est inséré un blanc (#text)

Avez-vous une idée pour gérer ça de façon plus propre ?

Merci à vous

• participer

Message publié le jeudi 20 novembre 2008 à 12 h 02 par Bul. mon site : http://bul.fr.nf m'écrire : http://bul.chez.com/mas/?bul

>>Avez-vous une idée pour gérer ça de façon plus propre ?
oui : faire ça uniquement en css.
tu trouveras partout et probablement sur allHtml !
des exemples, des tutos pour faire.
@+

• participer

Message publié le jeudi 20 novembre 2008 à 12 h 52 par Number.

J'ai peur de ne pas comprendre..

L'ensemble de mon site web est pour ainsi dire gérer par du css uniquement..
Mais de la a afficher/masquer une div sans rechargement de la page et uniquement en css j'ai du mal à comprendre.

Pour des effets simple, je suis tout a fait d accord mais faire un menu "explorateur windows" (treeview) avec des + et des - et un véritable arbre pour afficher les sous menus je ne vois vraiment pas.

Aurais-tu un exemple?

Merci pour ta patience

• participer

Message publié le jeudi 20 novembre 2008 à 12 h 53 par Number.

On ne peut pas éditer, voici l'exemple de ce que j'ai créer !!

http://www.graphiks.net/cours/javascript/74-menu-comme-l-explorateur.html

• participer

Message publié le dimanche 23 novembre 2008 à 13 h 28 par Number.

Pour les exemples en css je suis toujours preneur, je n'en trouve aucun !!

• participer

Message publié le dimanche 23 novembre 2008 à 17 h 55 par nours312. nours312.com

Salut :

je reprend en version CSS :

css : #menu li #sousMenu { display:none; } #menu li:hover #sousMenu{ display:block; } Html : <ul id="menu"> //Qui englobe tout le menu <li class="moin"> <a href="#">Accueil</a> <div id="sousMenu"> <ul id="Couche0"> // Englobe le sous menu Accueil <li>Sous Menu 1</li> <li>Sous Menu 2</li> </ul> </div> </li> <li class="moin"> <a href="#">Forum</a> <div id="sousMenu"> <ul id="Couche0"> // Englobe le sous menu Accueil <li>Sous Menu 1</li> <li>Sous Menu 2</li> </ul> </div> </li> </ul>

même si je ne suis pas partisan pour mettre des div dans les <li>, je préfère cela au <ul>, et ça devrait fonctionner ... il te faudra surement réaranger tout le code Css pour l'intégrer, mais la piste à suivre est celle-ci !

BonCode;)

• participer

Message publié le lundi 24 novembre 2008 à 11 h 11 par Number.

Merci, je vais donc suivre ta piste..

Par contre, penses tu qu'il serait possible de ne pas masquer le menu on est plus dessus?

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.