menu vertical dynamique

menu vertical dynamique - HTML/CSS - Programmation

Marsh Posté le 18-06-2007 à 17:18:39    

J'ai un menu vertical que j'ai inséré dans un site en ASP et auquel je voudrais rajouter des options....
 
- Je souhaiterai que mon menu reste en état lorsque je recharge ma page. Il s'agit d'un menu qui ressemble a un treeview et je veux donc que les sous-menu qui ont été développé le reste. Je pensais passer par une variable de session, mais est-ce possible en javascript ?
 
- Je souhaiterai a l'aide d'un boutton pouvoir développer l'ensemble du menu et inversement le refermer...
 
Si quelqu'un a des pistes a m'indiquer
 
Merci d'avance
 
Voici le code de mon menu:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <HTML>
  4.     <HEAD>
  5.         <TITLE>Test de menu dynamique</TITLE>
  6.         <STYLE>
  7.             .parent {
  8.                 font-family: verdana;
  9.                 font-weight: bold;
  10.                 font-size: 10pt;
  11.                 cursor: hand;
  12.             }
  14.             .child  {
  15.                 font-size: 10pt;
  16.    margin-left: 10pt;
  17.                 font-weight: normal;
  19.             }
  21.             a:hover { color:red; }
  22.         </STYLE>
  24.         <SCRIPT LANGUAGE=javascript>
  25.             var intCount = 0;
  27.             //-Fonction d'ajout d'entrées principales-------------------------
  28.             function DynamicMenu_addParent(strName) {
  29.                 var strID = 'P_' + strName;
  30.                 var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
  31.                 strTemp += ' onclick ="expandCollapse(this);">';
  32.                 strTemp += '<IMG SRC="left.gif" Height="12">';
  33.                 strTemp += '&nbsp;' + strName;
  34.                 strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
  35.                 strTemp += '</DIV>';
  37.                 this.div.innerHTML += strTemp;
  38.                 this.currentChild = document.getElementById(strID);
  39.             }
  41.             //-Fonction d'ajout des sous entrées principales-------------------------
  42.             function DynamicMenu_addSousParent(strName) {
  43.                 var strID = 'S_' + strName;
  44.                 var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
  45.                 strTemp += ' onclick ="expandCollapse(this);">';
  46.                 strTemp += '<IMG SRC="left.gif" Height="12">';
  47.                 strTemp += '&nbsp;' + strName;
  48.                 strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
  49.                 strTemp += '</DIV>';
  51.                 if (document.all) {
  52.                     this.currentChild.children[1].innerHTML += strTemp;
  53.                 } else {
  54.                     this.currentChild.childNodes[2].innerHTML += strTemp;
  55.                 }
  57.                 this.currentChild = document.getElementById(strID);
  58.             }
  60.             //-Fonction d'ajout de liens dans le menu-------------------------
  61.             function DynamicMenu_addChild(strName,strURL) {
  62.                 var strTemp = '<A HREF="' + strURL + '"'
  63.                             + ' onClick="cancelBubble(arguments[0]);">'
  64.                             + strName + '</A><BR>';
  66.                 if (document.all) {
  67.                     this.currentChild.children[1].innerHTML += strTemp;
  68.                 } else {
  69.                     this.currentChild.childNodes[2].innerHTML += strTemp;
  70.                 }
  71.             }
  73.             //-inhibe la cascade d'évènements au DIV conteneur----------------
  74.             function cancelBubble(netEvent) {
  75.                 if (document.all) {
  76.                     window.event.cancelBubble = true;
  77.                 } else {
  78.                     netEvent.cancelBubble = true;
  79.                 }
  80.             }
  82.             //-Contracte ou expanse le menu-----------------------------------
  83.             function expandCollapse(objElement) {
  85.    var strId = objElement.id;
  86.    if (intCount == 0) {
  87.                 if (document.all) {
  88.                     var imgIcon = objElement.children[0];
  89.                     objElement = objElement.children[1];
  90.                 } else {
  91.                     var imgIcon = objElement.childNodes[0];
  92.                     objElement = objElement.childNodes[2];
  93.                 }   
  95.                 if (objElement.style.display == "none" ) { 
  96.                     objElement.style.display = "block" ;
  97.                     imgIcon.src = "bottom.gif" ;
  98.                 } else {
  99.                     objElement.style.display = "none" ;
  100.                     imgIcon.src = "left.gif" ;
  101.                 }
  102.    }
  104.    if (strId.substring(0,1) == 'S') {
  105.     intCount = 1;
  106.    }
  108.    if (strId.substring(0,1) == 'P' && intCount == 1) {
  109.     intCount = 0;
  110.    }
  111.             }
  113.             //-Fonction de création de menu dynamique-------------------------  
  114.             function DynamicMenu(strName) {
  115.                 //var id = "Menu" + intCount++;
  116.                 var id = strName;
  117.                 document.write('<DIV Id="' + id + '"></DIV>');
  119.                 this.div = document.getElementById(id);
  120.                 this.currentChild = null;
  122.                 this.addParent = DynamicMenu_addParent;
  123.                 this.addSousParent = DynamicMenu_addSousParent;
  124.                 this.addChild = DynamicMenu_addChild;
  125.             }
  126.         </SCRIPT>
  127.     </HEAD>
  129.     <BODY>
  130.         <SCRIPT Language="Javascript">
  131.             var menu = new DynamicMenu("Menu1" );
  133.   menu.addParent("Présentation","page1.html" );
  134.                 menu.addChild("Lien 1","page1.html" );
  135.             menu.addSousParent("Node 11","" );
  136.                 menu.addChild("Lien 1","page1.html" );
  137.                 menu.addChild("Lien 2","page2.html" );
  138.              menu.addSousParent("Node 111","" );
  139.                  menu.addChild("Lien 1","page1.html" );
  141.             menu.addParent("Liens","" );
  142.                 menu.addChild("Lien 1","page1.html" );
  143.                 menu.addChild("Lien 2","page2.html" );
  145.         </SCRIPT>
  146.     </BODY>
  148. </HTML>

Reply

Marsh Posté le 18-06-2007 à 17:18:39   

Reply

Marsh Posté le 18-06-2007 à 23:23:54    

Je ne réponds pas à ta question mais moi j'utilise ça, ça marche très bien et c'est assez souple !!!
http://www.destroydrop.com/javascripts/tree/
et des exemples ici:
http://www.destroydrop.com/javascripts/tree/example/
Maintenant, si tu veux développer un truc toi même... :whistle:
 
L'API nous dit ceci :
configuration :
useCookies : Boolean  The tree uses cookies to remember it's state.
et il y a une fonction open all / close all


Message édité par fabrice91 le 18-06-2007 à 23:28:04
Reply

Marsh Posté le 19-06-2007 à 09:01:14    

Merci pour ton lien, sa pourrait m'intéresser...
 
Sinon j'ai oublié de préciser un truc: c'est pas moi qui a développé ce menu, il s'agit d'un code dispo sur le net... je mettrai un lien vers la source si je le retrouve...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed