Menu vertical à plusieurs niveaux

[Lunathiel]

Bonjour à tous...

J'aimerais pouvoir ajouter à mon forum un Menu vertical à plusieurs niveaux comme celui-ci trouvé sur internet

http://dosimple.ch/articles/Menus-dynamiques/menuVertical.html

Mais je ne comprends absolument pas comment intégré ça sur mon forum... Quelqu'un pourrait-il éclairé ma lanterne?

Un grand merci d'avance

[Lunathiel]

Un petit up merci beaucoup

[Lixyr Yrna]

Bonjour Luna.

J'ai réussi à obtenir quelque chose en téléchargent les fichiers et en regardant le code source.

Alors déjà dans ton css tu mets ceci :

Panneau d'administration >> affichage >> couleur >> feuille de style css

Code:

/* CSS du menu vertical, bieler batiste */


.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;
    }

Ensuite, je suppose que tu veux ça dans ta page d'accueil, tu vas dans ta page d'accueil et tu mets ceci :

Code:


  <table style="height:350px;width:100%;">
<tr><td style="vertical-align:top;text-align:center;width:100%;">

<script src="http://www.archive-host.com/files/775966/96de005e35ffd2b9823d2b1d229d90d18341a601/cssllistederoulanteavecnavigateur.js"></script>

<script src="http://www.archive-host.com/files/775967/96de005e35ffd2b9823d2b1d229d90d18341a601/csslistederoulante.js"></script>



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

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




<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
    <li><a href="#menu1">menu 1</a>
        <ul>
            <li><a href="#">élément 1</a></li>

            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
                            <li><a href="#">élément 1</a></li>

                            <li><a href="#">élément 2</a></li>
                            <li><a href="#">élément 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">élément 1</a></li>

            <li><a href="#">élément 3</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>

        </ul>
    </li>
    <li><a href="#menu2" >menu 2</a>   
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>

        </ul>
    </li>
    <li><a href="#menu3" >menu 3</a>   
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>

        </ul>
    </li>
</ul>


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

Explications :

<table style="height:350px;width:100%;">
<tr><td style="vertical-align:top;text-align:center;width:100%;">

<script src="http://www.archive-host.com/files/775966/96de005e35ffd2b9823d2b1d229d90d18341a601/cssllistederoulanteavecnavigateur.js"></script>

<script src="http://www.archive-host.com/files/775967/96de005e35ffd2b9823d2b1d229d90d18341a601/csslistederoulante.js"></script>

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

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




<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
<li><a href="#menu1">menu 1</a>
<ul>
<li><a href="#">élément 1</a></li>

<li><a href="#">élément 2</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<ul>
<li><a href="##">élément 1</a></li>

<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">élément 1</a></li>

<li><a href="#">élément 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#menu2" >menu 2</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>

</ul>
</li>
<li><a href="#menu3" >menu 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>

</ul>
</li>
</ul>


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

=> en orange : c'est le tableau qui contient ton menu déroulant. Si tu ne mets pas le menu se retrouveras en dessous de la page d'accueil alors .. Il te suffit juste de changer la taille de la hauteur du tableau à ta guise, sans mettre un chiffre trop petit, parce que le menu déroulant a besoin d'espace :

<table style="height:350px;width:100%;">

=> en bleu : ce sont les codes java insérés dans la page d'accueil afin de permettre au menu déroulant de fonctionner normalement. Les deux premiers sont les fichiers à télécharger que j'ai téléchargé moi même.

=> en vert : C'est le code de la liste déroulante.

=> en cyan : C'est le texte qui est visible sur la page d'accueil et que tu peux modifier.

=> en rose : Le code qui lie le code html au code css.



Alors ce code, je ne l'ai pas testé, juste mis en forme. Il ne devrait pas y avoir de problèmes mais on ne sait jamais.
Si question il y a, n'hésite pas à demander.

[Lunathiel]

Cela fonctionne très bien!!! Un grand merci...

Maintenant j'ai une petite question... Comment a tu fait =D tu as prit les scripts simplement puis tu les hébergés?

En tout cas un IMMMMMENSEEE merci pour ce que tu as fait là!!! Je t'en suis très reconnaissante

[Lixyr Yrna]

Alors, comment j'ai fait ?

Et bien j'ai cliqué sur ton lien.
Quand tu regardes tu as plusieurs lien cliquables sur ta page, et surtout ceux-là :

# le fichier CSS
# le fichier Javascript
# le fichier Javascript de détéction du navigateur nécessaire à l'éxecution du script


J'ai cliqué sur les liens et les ai enregistré dans un bloc note. Pour ce qui est du css par contre je l'ai copié directement dans la feuille css dans le panneau d'administration.

Pour les fichiers java, donc les deux autres, et bien ce sont eux que j'ai enregistrés dans un bloc note, en les mettant sous .js

Ensuite, je suis allé sur un site d'hébergement (Archive Host est très bien), je les ai hébergé, et j'ai gardé les liens directes que j'ai placé dans le code qui sert à introduire un fichier hébergé :

Code:

<script src="LIEN DU FICHIER HEBERGE EN FORMAT.js"></script>

Et pour le reste du code, il n'est pas trouvable sur la page alors je suis allé le chercher directement dans le code source (clique droit, et code source de la page).

Voilà. J'espère avoir entièrement répondu à ta question.
De rien pour le tuto, c'est un plaisir. ^^

Lixyr.

[Lunathiel]

Merci beaucoup!!! ça éclaire ma petite lanterne^^

Un immense merci à toi encore une fois =)

Je clôture