11548 sujets

JavaScript, DOM et API Web HTML5

Liste <ul> déroulable par clic

Bonjour,

J'aimerais pemettre à l'utilisateur de cliquer sur un <li> pour ouvrir des sous menus. J'ai une arborescence assez complexe, et cette présentation me permettra de clarifier cette partie du site.

J'aimerais faire une interface semblable à un explorateur Windows en fait :
a écrit :

+ Menu 1
- Menu 2
....*sousmenu 1
....*sousmenu 2
+ Menu 3
...


Je pense que je suis dans le bon forum, (je ne veux pas le faire en PHP, car ce serait assez lourd comme script) je pense que javascript peut faire ça.

Bémol : je n'ai aucune notion de javascript.

Merci d'avance !
Modifié par Aerandir (06 Feb 2007 - 09:33)
Alors la malchance me suit, je n'arrive pas à l'implémenter dans mon code.

J'ai pris le script que j'ai encadré par des balises <script type="text/javascript">...</script>. Le script apparaît bien dans les sources de la page, mais malheureusement le menu ne se cache pas.

Dans le menu sur le premier <ul> j'ai mis un id="truc" (par exemple), et donc j'ai fait correspondre avec la dernière ligne du script DynamMenu("truc");
J'ai aussi mis des liens href="#" sur chaque noeud, malheureusement rien n'y fait je n'arrive pas à cacher les sous-menus.

Je génère le menu après une succession de requête SQL, est ce que le problème viendrait de là ? ou serais-ce une mauvaise manip' de ma part ? (vu ma compréhension du JS ça ne m'étonnerait pas Smiley cligne

Merci d'avance ! Smiley smile
Modifié par Aerandir (06 Feb 2007 - 10:40)
Bon je vais mettre le code en ligne, mais le script est pas très appréciable à lire... Y a beaucoup de PHP dans le menu. je vais dans un premier temps poster seulement ce que génère le PHP, à savoir juste le menu. 


<ul id='menu_admin'>
	<li><a href='#'>Accueil</a>
		<ul>
			<li><a href='#'>test_accueil</a></li>
		</ul>
	</li>
	<li><a href='#'>Logiciels</a>
		<ul>
			<li><a href='#'>ADD</a>
				<ul>
					<li><a href='#'>Gestion commerciale</a>
						<ul>
							<li><a href='#'>Titre</a></li>
						</ul>
					<li><a href='#'>Outils d'infocentre StatSQL</a></li>
					<li><a href='#'>Logiciel d'archivage</a></li>
					<li><a href='#'>Site marchand professionnel</a></li>
				</ul>
			</li>
			<li><a href='#'>SAGE</a>
				<ul>
					<li><a href='#'>Ligne 100</a>
						<ul>
							<li><a href='#'>Compta</a></li>
							<li><a href='#'>Paye</a></li>
							<li><a href='#'>Gestion</a></li>
						</ul>
					<li><a href='#'>Ligne 30</a>
						<ul>
							<li><a href='#'>Compta</a></li>
							<li><a href='#'>Paye</a></li>
							<li><a href='#'>Gestion</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href='#'>Clients</a></li>
	<li><a href='#'>Partenaires</a></li>
	<li><a href='#'>Téléchargements</a></li>
	<li><a href='#'>Contact</a></li>
</ul>


Et en suite le javascript :


<script type="text/javascript">// JavaScript Document
function DynamMenu(IdMenu){
		if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
			return; 
		var Menu = document.getElementById(IdMenu); //On récupère le menu
		var li = Menu.getElementsByTagName('li'); //On récupère tous les LI du menu
   	  for(var ii=0; ii<li.length-1; ++ii) { //On scanne tous les LI
				var sousUL = li ii .getElementsByTagName('ul'); //Pour chaque LI on recupère le UL dessous
				if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
					sousUL[0].id = IdMenu + ii; //On met un ID à ce UL
					sousUL[0].style.display = "none";
					li ii .getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('" + IdMenu + ii + "')";
				}  
			}
	}
	window.onload = init;
	function ShowHideMenu(MenuId){
		var SousMenu = document.getElementById(MenuId);
		if (SousMenu.style.display=='block' || SousMenu.style.display == null) {
			SousMenu.style.display = 'none'; //ON cache le sous menu
		}
		else{ 
			SousMenu.style.display = 'block'; //On affiche le sous menu
		}
	}
	function init(){
		DynamMenu("menu_admin");
	}</script>

Modifié par Aerandir (07 Feb 2007 - 10:10)
Aucune idée ? Smiley rolleyes

De mon côté j'ai copié le code qui se trouve dans l'exemple, et chez moi, en tout cas, il ne marche pas. Soit le code dans l'article est faux, soit (à plus forte probabilité) c'est moi qui déraille Smiley langue
Modifié par Aerandir (07 Feb 2007 - 10:29)
...c'est pas faux... ^_^

Mais quelle fonction appeler ? je sais qu'il y a des events mais j'avoue que je sais pas trop par où m'y prendre. En revanche j'ai trouvé un autre tutorial de Raphaël, avec les appels de fonctions dans le HTML.

Docn j'ai réussi avec ça. Je pense que ce tut' est meilleur ne serait-ce que par la concision du code. Smiley smile (même s'il n'y a pas de fonction pour *cacher* le sous-menu)

Alors je met ce sujet [Résolu] ou j'attends qu'une âme bénie trouve les appels de fonctions dans le HTML ?

Smiley rolleyes
Finalement le lien que j'ai mis au dessus ne marche visiblement que sur un menu à un étage, lorsque j'enchaine plusieurs sous-menus, il n'affiche plus.

Smiley decu

Donc faudrait trouver quelque chose qui marche sur plusieurs étages... si quelqu'un à une idée je prend Smiley lol
Modifié par Aerandir (07 Feb 2007 - 17:43)
Voici un bout de code qui marche bien sur un site que j'ai développé


var type = document.getElementById(elem);
    var ul_element = document.createElement("ul");
.....

  				element = document.createElement("li");
				element.setAttribute("id","elem00");
  				style = document.createAttribute("style");
 				element.setAttributeNode(style);				
 				element.style.listStyleImage="url(p33.gif)";			
				nouveau_texte = document.createTextNode(unescape("Mon texte"));
	.....
				element.appendChild(nouveau_texte);


et pour supprimer un sous-menu


.....
		var noeud=document.getElementById(id);
		if (noeud.firstChild){
			enfant = noeud.firstChild;
			while (enfant!=null){
				toto = enfant.nextSibling;
				disparu = noeud.removeChild(enfant);
				enfant = toto;		
			}
		}	
	.....
		var type = document.getElementById(elem);
		disparu = type.removeChild(noeud);


bon courage
Sujet clos
Aller à