Ajourter une option à ce menu [Résolu]

Signaler
Messages postés
45
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
14 janvier 2010
-
Messages postés
45
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
14 janvier 2010
-
Bonjour à tous,
Voici un menu vertical coulissant que j'utiliserais bien pour la grande arborescence de mon site...
Par contre je voudrais lui ajouter une option : lorsqu'un menu est ouvert et que je veux en ouvrir un autre, le premier ce ferme (afin qu'il ne s'étende pas trop sur la page)


Voici le code entier :


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.sdmenu {
    width: 150px;
    font-family: Sans-Serif;
    font-size: 12px;
    padding-bottom: 10px;
    background: #eee url(bottom.jpg) no-repeat  right bottom;
    color: #FFF;
}


.sdmenu .title, .sdmenu .titlehidden{
    display: block;
    padding: 5px 0;
    font-weight: bold;
    color: white;
    background: #FFF url(toptitle.jpg) repeat-x;
}


.sdmenu .title {
    border-bottom: 1px solid yellow;
}


.sdmenu .arrow {
  margin-left: 10px;
    margin-right: 7px;
}


.sdmenu .titlehidden {
    border-bottom: none;
}


.sdmenu #top {
    background: url(toptitle.jpg) no-repeat;
}


.sdmenu .submenu {
    overflow: hidden;
}


.sdmenu .submenu a {
    padding: 5px 0;
    text-indent: 10px;
    background: black;
    text: black;
    display: block;
    border-bottom: 1px solid yellow;
    color: gray;
    text-decoration: none;


}


.sdmenu .submenu a:hover {
    background : #600040 url(linkarrow.gif) no-repeat right center;
    color: #FFF;
}
</style>
<SCRIPT LANGUAGE=JavaScript>
var remember = true; //Remember menu states, and restore them on next visit.
var contractall_default= true; //Should all submenus be contracted by default? (true or false)


var menu, titles, submenus, arrows, bypixels;
var heights = new Array();


var n = navigator.userAgent;
if(/Opera/.test(n)) bypixels = 2;
else if(/Firefox/.test(n)) bypixels = 3;
else if(/MSIE/.test(n)) bypixels = 2;


/////DD added expandall() and contractall() functions/////


function slash_expandall(){
if (typeof menu!="undefined"){
 for(i=0; i<Math.max(titles.length, submenus.length); i++){
  titles[i].className="title";
  arrows[i].src = "slashfiles/expanded.gif";
  submenus[i].style.display="";
  submenus[i].style.height = heights[i]+"px";
 }
}
}


function slash_contractall(){
if (typeof menu!="undefined"){
 for(i=0; i<Math.max(titles.length, submenus.length); i++){
  titles[i].className="titlehidden";
  arrows[i].src = "slashfiles/collapsed.gif";
  submenus[i].style.display="none";
  submenus[i].style.height = 0;
 }
}
}


/////End DD added functions///////////////////////////////




function init(){
    menu = getElementsByClassName("sdmenu", "div", document)[0];
    titles = getElementsByClassName("title", "span", menu);
    submenus = getElementsByClassName("submenu", "div", menu);
    arrows = getElementsByClassName("arrow", "img", menu);
    for(i=0; i<Math.max(titles.length, submenus.length); i++) {
        titles[i].onclick = gomenu;
        arrows[i].onclick = gomenu;
        heights[i] = submenus[i].offsetHeight;
        submenus[i].style.height = submenus[i].offsetHeight+"px";
    }
    if(remember)
    restore()
  else if (contractall_default) //DD added code
    slash_contractall() //DD added code
}


function restore() {
    if(getcookie("menu") != null) {
        var hidden = getcookie("menu").split(",");
        for(var i in hidden) {
            titles[hidden[i]].className = "titlehidden";
            submenus[hidden[i]].style.height = "0px";
            submenus[hidden[i]].style.display = "none";
            arrows[hidden[i]].src = "slashfiles/collapsed.gif";
        }
    }
}


function gomenu(e) {
    if (!e)
        var e = window.event;
    var ce = (e.target) ? e.target : e.srcElement;
    var sm;
    for(var i in titles) {
        if(titles[i] == ce || arrows[i] == ce)
            sm = i;
    }
    if(parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2) {
        hidemenu(sm);
    } else if(parseInt(submenus[sm].style.height) < 2) {
        titles[sm].className = "title";
        showmenu(sm);
    }
}


function hidemenu(sm) {
    var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
    submenus[sm].style.height = (parseInt(submenus[sm].style.height)-nr)+"px";
    var to = setTimeout("hidemenu("+sm+")", 30);
    if(parseInt(submenus[sm].style.height) <= nr) {
        clearTimeout(to);
        submenus[sm].style.display = "none";
        submenus[sm].style.height = "0px";
        arrows[sm].src = "slashfiles/collapsed.gif";
        titles[sm].className = "titlehidden";
    }
}


function showmenu(sm) {
    var nr = submenus[sm].getElementsByTagName("a").length*bypixels;
    submenus[sm].style.display = "";
    submenus[sm].style.height = (parseInt(submenus[sm].style.height)+nr)+"px";
    var to = setTimeout("showmenu("+sm+")", 30);
    if(parseInt(submenus[sm].style.height) > (parseInt(heights[sm])-nr)) {
        clearTimeout(to);
        submenus[sm].style.height = heights[sm]+"px";
        arrows[sm].src = "slashfiles/expanded.gif";
    }
        
        
}


function store() {
    var hidden = new Array();
    for(var i in titles) {
        if(titles[i].className == "titlehidden")
            hidden.push(i);
    }
    putcookie("menu", hidden.join(","), 30);
}


function getElementsByClassName(strClassName, strTagName, oElm){    var arrElements (strTagName "*" &amp;&amp; document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "([file://\\s|$ \\s|$])");
    var oElement;
    for(var i=0; i[1.html 1]
        [2.html 2]
        [3.html 3]
      

      B
      

        [11.html 1]
        [12.html 2]
        [13.html/ 3]
        [14.html/ 4]
        [15.html 5]
        [16.html 6]
        [17.html 7]
        [18.html 8]
        [19.html 9]
      

      C
      

        [21.html 1]
        [22.html 2]
        [23.html/ 3]
        [24.html/ 4]
        [25.html 5]
        [26.html 6]
        [27.html 7]
        [28.html 8]
        [29.html 9]
      

      D
      

        [31.html 1]
        [32.html 2]
        [33.html 3]
        [34.html 4]
      

    

</html>



Si quelqu'un pourrais toucher au javascript pour rendre cette action possible ce serait très sympa!
Merci d'avance et JOYEUX NOEL à tous!


----------
GoingUP

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Une lecture plus avant du code me permet de te proposer une autre solution à partir des données du code... 

mettre la variable
var remember = false;//true; //Remember menu states, and restore them on next visit.
à false

mettre à la place de hide_All() dans la fonction gomenu(e)...
slash_contractall();

l'effet sera le même que l'effet radical d'écrit ci dessus
;0)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
B



onjour...
Il te faut créer une fonction qui masque tous les sous menus avant d'en ouvrir un et de placer l'appel de la fonction dans la fonction function gomenu(e){...}

il peut y avoir deux façons de masquer les sous menus, une radicale ou une avec l'effet dynamique

1/ Appel de la fonction
function gomenu(e){
  if (!e)
    var e = window.event;
  var ce = (e.target) ? e.target : e.srcElement;
  var sm;
  for(var i in titles) {
    if(titles[i] == ce || arrows[i] == ce)
      sm = i;
  }
  //-- Appel New Function
  hide_All();

  if(parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2) {
    hidemenu(sm);
  }else if(parseInt(submenus[sm].style.height) < 2) {
     titles[sm].className = "title";
     showmenu(sm);
  }
}

2/ la function hide_All
//-----------------
function hide_All(){
  var bEffet = true; // flag pour l'effet mets la valeur à false pour voir la différence  for(var i in submenus){
    //-- Effet dynamique
    if( bEffet){
      if(parseInt(submenus[i].style.height) > parseInt(heights[i])-2)
      hidemenu(i);
    }
    //-- Effet radical même chose que dans la fct hidemenu
    else{
      submenus[i].style.display = "none";
      submenus[i].style.height = "0px";
      arrows[i].src = "slashfiles/collapsed.gif";
      titles[i].className = "titlehidden";
    }
  }
}

A toi de choisir...
;0)
Messages postés
45
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
14 janvier 2010

C'est parfait merci!!!

----------
GoingUP