IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Menu arborescent javascript


Sujet :

JavaScript

  1. #1
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut Menu arborescent javascript
    Bonjour,

    J'essaie de r�aliser un menu arborescent en javascript qui aurait par exemple la forme suivante :

    - Lien 1
    - Lien 1.1
    - Lien 1.2
    - Lien 2
    - Lien 2.1
    - 2.1.1
    - 2.1.2
    - Lien 2.2
    etc.

    Son fonctionnement : Un clique sur le lien 1 ferait apparaitre les liens 1.1 et 1.2 tout en ouvrant la page du lien 1. Il en serait de m�me pour les autres liens.
    C'est la diff�rence avec les autres menus arborescent que j'ai pu trouver sur le net qui lorsqu'on clique sur le lien 1, la seule action qui se produit est l'apparition des liens 1.1 et 1.2. Pas de nouvelles pages.
    J'ai d'ailleurs quelques contraintes : ce menu est d�crit dans une page php qui est inclus dans toutes les autres pages de mon site. Et je ne peux pas utiliser de fichier xml.

    J'aimerais donc l'aide de quelq'un pour me dire comment afficher un sous-menu tout en changeant de page.

    J'esp�re que j'ai pas �t� trop confus.
    Merci d'avance pour votre aide.

  2. #2
    Membre chevronn� Avatar de d-Rek
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activit� : D�veloppeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Par d�faut
    Faut faire joujou avec des boites.. enfin des div.

    Structure HTML :
    Code HTML : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="menu">
    	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
    	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
    		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#2_1">Lien 2 - 1</a></div>
    		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#2_2">Lien 2 - 2</a></div>
    	</div>
     
    </div>

    Pour le code JS, tu balances � ta fonction id de la div et tu bosses avec les enfants que tu met en display:block ou none...

  3. #3
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut
    Merci.

    Je vais tester �a.

  4. #4
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut
    Je viens de passer un peu de temps dessus et j'arrive bien � faire mon arborescence, mais d�s que je remplace les #1 par des noms de pages, je vois le menu apparaitre puis disparaitre lorsque je change de page.
    Voici mon code :
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function show(id)
    {
    nbr = document.getElementsByTagName("div" );
       for (i = 1; i < nbr.length; i++) 
       {
           if ((document.getElementById(id+"_"+i).style.display)=="none") {
               document.getElementById(id+"_"+i).style.display="block";
           } else {
               document.getElementById(id+"_"+i).style.display="none";
           }
       }
    }
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="menu">
    	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
    	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
    		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#2_1">Lien 2 - 1</a></div>
    			<div id="lien2_1_1" style="display:none; padding-left:20px;"><a href="#2_1">Lien 2 - 1 - 1</a></div>
    			<div id="lien2_1_2" style="display:none; padding-left:20px;"><a href="#2_1">Lien 2 - 1 - 2</a></div>
    		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#2_2">Lien 2 - 2</a></div>
    </div>

  5. #5
    R�dacteur
    Avatar de _Mac_
    Profil pro
    Inscrit en
    Ao�t 2005
    Messages
    9 601
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Ao�t 2005
    Messages : 9 601
    Par d�faut
    Bah c'est normal : une nouvelle page est affich�e et donc le menu est recharg� depuis le d�but. En gros, l'�tat de ton menu n'est pas conserv� d'une page � l'autre. Donc soit tu te contente de ce comportement, soit tu vois pour utiliser un cookie par exemple pour persister l'�tat de ton menu d'une page � l'autre.

  6. #6
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut
    Je ne suis pas dou� du tout avec les cookies.

    Alors j'ai fait ceci :
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
     
    <script type="text/javascript">
    function setCookie(c_name, value, expiredays) {
     
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
     
    }
     
    function getCookie(c_name)
    {
     if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1; 
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        } 
      }
    return "";
     
    }
     
    function show(id)
    {
    	nbr = document.getElementsByTagName("div" );
    	for (i = 1; i < nbr.length; i++) 
    	{
    		if ((document.getElementById(id+"_"+i).style.display)=="none") 
    		{
    			document.getElementById(id+"_"+i).style.display="block";
                                           setCookie("tree",document.getElementById("menu").innerHTML,10);
     
    	    }
    		else
    		{
    			document.getElementById(id+"_"+i).style.display="none";
           }
    	}
     
    }
    setCookie("tree",document.getElementById("menu").innerHTML,10);
    </script>
     
     
     
    <script type="text/javascript">
    var printCookie=getCookie("tree");
    document.writeln(printCookie);
    </script>
     
    <div id="menu">
    	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
    	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
    		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#3">Lien 2 - 1</a></div>
    		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#4">Lien 2 - 2</a></div>
    	</div>
    </div>
    J'ai 2 menus mais c'est ok, je sais pourquoi. Par contre, lorsque je clique sur lien 2 puis reviens sur le lien1, le sous menu du lien 2 qui �tait apparu ne veut pas disparaitre.
    Qu'est-ce qui me manque ?

  7. #7
    R�dacteur
    Avatar de _Mac_
    Profil pro
    Inscrit en
    Ao�t 2005
    Messages
    9 601
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Ao�t 2005
    Messages : 9 601
    Par d�faut
    Je dirais qu'il faut que tu appelles ta fonction setCookie � la fin de show, de mani�re � ce qu'elle soit mise � jour � chaque modification de l'affichage du menu.

  8. #8
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut
    Quand je le mets � la fin de show(), le sous-menu disparait dans la nouvelle page.

  9. #9
    R�dacteur
    Avatar de _Mac_
    Profil pro
    Inscrit en
    Ao�t 2005
    Messages
    9 601
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Ao�t 2005
    Messages : 9 601
    Par d�faut
    Autre solution : mettre ton appel � setCookie dans l'attribut onunload de <body> : �a appelera ta fonction au changement de page uniquement. En esp�rant que le navigateur accepte le cookie � ce moment-l�...

  10. #10
    R�dacteur
    Avatar de _Mac_
    Profil pro
    Inscrit en
    Ao�t 2005
    Messages
    9 601
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Ao�t 2005
    Messages : 9 601
    Par d�faut
    Citation Envoy� par _Mac_ Voir le message
    Autre solution : mettre ton appel � setCookie dans l'attribut onunload de <body> : �a appelera ta fonction au changement de page uniquement, ce qui sauvera le dernier �tat de ton menu. En esp�rant que le navigateur accepte le cookie � ce moment-l�...

  11. #11
    Membre � l'essai
    Inscrit en
    Mars 2008
    Messages
    6
    D�tails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 6
    Par d�faut
    Ca ne semble pas fonctionner non plus.

    J'abandonne mon id�e. Je pense que je vais faire un autre type de menu.

    Merci de votre aide.

Discussions similaires

  1. [d�butant]Cr�er arborescence javascript (a partir d'XML)
    Par gabychon dans le forum G�n�ral JavaScript
    R�ponses: 7
    Dernier message: 25/04/2006, 11h13
  2. Menu arborescent;
    Par cisse18 dans le forum G�n�ral JavaScript
    R�ponses: 2
    Dernier message: 29/03/2006, 09h16
  3. [Site Web]Comment former une table type Menu arborescent?
    Par Zebeber dans le forum D�cisions SGBD
    R�ponses: 6
    Dernier message: 24/03/2006, 08h55
  4. [Conception] Menu arborescent dynamique
    Par Azanael dans le forum PHP & Base de donn�es
    R�ponses: 2
    Dernier message: 12/03/2006, 14h41
  5. Menu css/javascript
    Par vincedjs dans le forum G�n�ral JavaScript
    R�ponses: 4
    Dernier message: 22/02/2006, 11h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo