Menu vertical

Signaler
Messages postés
39
Date d'inscription
mercredi 7 mars 2007
Statut
Membre
Dernière intervention
1 février 2008
-
Messages postés
39
Date d'inscription
mercredi 7 mars 2007
Statut
Membre
Dernière intervention
1 février 2008
-
Bonjour,

Je souhaite créer un menu vertical pour un site, ça marche sauf que je peux mettre que 12 différentes parties maximum et j'en ai 14 à insérer ! Je sais pas si vous comprenez ce que je veux dire...un menu verticale est composé de différentes parties, par ex ici sur code source on a les parties divers, partenaires, section étudiants...et moi je voudrais en mettre 14, sauf que plus de 12 ça ne fonctionne plus ! Je ne vois pas quel est le problème, merci de m'aider !
voici le code :

<html>
<head>

<!-- script du menu -->
<script type="text/javascript" src="menu_vertical.js"></script>

 <!-- détéction du navigateur -->
<script type="text/javascript" src="menu_vertical_dect.js"></script>

<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">@import "menu_vertical.css";</style>

</head>

<!-- liste imbriquée de liens qui fera office de menu -->

    <li>1
       
            <li>[# a]</li>
            <li>[# b]</li>
            <li>[# c]</li>
            <li>[# d]</li>
            <li>[# e]</li>
            <li>[# f]</li>
            <li>[# g]</li>
            <li>[# h]</li>
            <li>[# i]</li>
            <li>[# j]</li>
       
    </li>
    <li>2   
       
            <li>[# a]</li>
            <li>[# b]</li>
            <li>[# c]</li>
            <li>[# d]</li>
            <li>[# e]</li>
       
    </li>
    <li>3   
       
            <li>[# a]</li>
            <li>[# b]</li>
            <li>[# c]</li>
            <li>[# d]</li>
            <li>[# e]</li>
            <li>[# f]</li>
            <li>[# g]</li>
            <li>[# h]</li>
            <li>[# i]</li>
       
    </li>
    
ici, la meme structure que précédemment est répété pour en avoir 14. Mais au-dessus de 12, ça ne fonctionne plus !

<script type="text/javascript">
    initMenu();
</script>

</html>

voici la css qui va avec puis la feuille javascript :

/* CSS du menu vertical */

body{
    margin-left:15em;
    }

.menu{
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:152px;
    width/**/:150px;
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    margin:0;
    padding:0;
    }
   
.menu span{
    display:none;
    }
   
.menu ul{
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    margin:0;
    padding:0;
    position:absolute; /* important */
    width:152px;
    width/**/:150px;
    }
   
.menu li ul{
    visibility:hidden;
    }
           
.menu li ul{
    margin-left:150px; /* be careful */
    margin-top:-24px;
    }
   
.menu a{
    text-align:center;
    background-color: #ff9;
    color:#000;
    text-weight:bold;
    display:block;
    width:150px;
    border-bottom: 1px #000 solid;
    text-decoration:none;
    margin:0;
    padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
    }
   
.menu a:hover{
    background-color: #aaf;
    }
   
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

.menu span{
    /* hide some accessibility stuff */
    display:none;
    }
       
.menu li{
    width:150px;
    display:block;   
    float:left; 
    list-style:none;
    margin:0;
    padding:0;
    }
   
/* IE PC selector */
* html .menu li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }
   
a.linkOver{
    background-color: #eee;
    }

// the timeout for the menu
var timeout = 1000;

// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;

// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
    eval("var timeoutli" + i + " = false;");
}

// this fonction apply the CSS style and the event
function initMenu()
{
    // a test to avoid some browser like IE4, Opera 6, and IE Mac
    if ( browser.isDOM1
    && !( browser.isMac && browser.isIE )
    && !( browser.isOpera && browser.versionMajor < 7 )
    && !( browser.isIE && browser.versionMajor < 5 ) )
    {
        // get some element
        var menu = document.getElementById('menu'); // the root element
        var lis = menu.getElementsByTagName('li'); // all the li
       
        // change the class name of the menu,
        // it's usefull for compatibility with old browser
        menu.className='menu';
       
        // i am searching for ul element in li element
        for ( var i=0; i<lis.length; i++ )
        {
            // is there a ul element ?
            if ( lis.item(i).getElementsByTagName('ul').length > 0 )
            {       
                // improve IE key navigation
                if ( browser.isIE )
                {
                    addAnEvent(lis.item(i),'keyup',show);
                }
                // link events to list item
                addAnEvent(lis.item(i),'mouseover',show);
                addAnEvent(lis.item(i),'mouseout',timeoutHide);
                addAnEvent(lis.item(i),'blur',timeoutHide);
                addAnEvent(lis.item(i),'focus',show);
               
                // add an id to list item
                lis.item(i).setAttribute( 'id', "li"+i );
            }
        }
    }
}

function addAnEvent( target, eventName, functionName )
{
    // apply the method to IE
    if ( browser.isIE )
    {
        //attachEvent dont work properly with this
        eval('target.on'+eventName+'=functionName');
    }
    // apply the method to DOM compliant browsers
    else
    {
        target.addEventListener( eventName , functionName , true ); // true is important for Opera7
    }
}
   
// hide the first ul element of the current element
function timeoutHide()
{
    // start the timeout
    eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( "" + this.id + "" )', " + timeout + " );");
}

// hide the ul elements under the element identified by id
function hideUlUnder( id )
{  
    document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}

// show the first ul element found under this element
function show()
{
    // show the sub menu
    this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
    var currentNode=this;
    while(currentNode)
    {
            if( currentNode.nodeName=='LI')
            {
                currentNode.getElementsByTagName('a')[0].className = 'linkOver';
            }
            currentNode=currentNode.parentNode;
    }
    // clear the timeout
    eval ( "clearTimeout( timeout"+ this.id +");" );
    hideAllOthersUls( this );
}

// hide all ul on the same level of  this list item
function hideAllOthersUls( currentLi )
{
    var lis = currentLi.parentNode;
    for ( var i=0; i<lis.childNodes.length; i++ )
    {
        if ( lis.childNodes[i].nodeName=='LI' && lis.childNodes[i].id != currentLi.id )
        {
            hideUlUnderLi( lis.childNodes[i] );
        }
    }
}

// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
    var as = li.getElementsByTagName('a');
    for ( var i=0; i<as.length; i++ )
    {
        as.item(i).className="";
    }
    var uls = li.getElementsByTagName('ul');
    for ( var i=0; i<uls.length; i++ )
    {
        uls.item(i).style['visibility'] = 'hidden';
    }
}

2 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
il n'y a pas assez de timeout de déclarés, si ton nombre de LI dépasse 100 BOUM ERROR = > mais à 200, c'est pas très propre mais cela devrait passer
// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 200 ; i++ ){
    eval("var timeoutli" + i + " = false;");
}
...
;O)
Messages postés
39
Date d'inscription
mercredi 7 mars 2007
Statut
Membre
Dernière intervention
1 février 2008

Merci ! ça devrait fonctionner.