Ajourter une option à ce menu

Résolu

goingup Messages postés 45 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 14 janvier 2010 - 25 déc. 2006 à 12:28
goingup Messages postés 45 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 14 janvier 2010 - 27 déc. 2006 à 20:36

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

A voir également:

Ajourter une option à ce menu
Option base 1 vba - Forum Visual Basic
Option base 1 ✓ - Forum Visual Basic
Option explicit vba - Forum Visual Basic
New option javascript ✓ - Forum Javascript / DHTML
Menu php - Forum PHP

3 réponses

Réponse 1 / 3

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
27 déc. 2006 à 17:11

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)

Réponse 2 / 3

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
27 déc. 2006 à 16:56

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)

Réponse 3 / 3

goingup Messages postés 45 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 14 janvier 2010
27 déc. 2006 à 20:36

C'est parfait merci!!!

----------
GoingUP

Discussions similaires

ajouter une option à java VM

menu en c

"Option base 1" ??

Connaitre l'option activé

comment créer un sous menu

Votre réponse

Discussions similaires