Menu vertical à plusieurs niveaux
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Menu vertical à plusieurs niveaux
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
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
Dernière édition par Lunathiel le Mar 11 Jan 2011 - 19:34, édité 1 fois
Re: Menu vertical à plusieurs niveaux
Un petit up merci beaucoup
Re: Menu vertical à plusieurs niveaux
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
Ensuite, je suppose que tu veux ça dans ta page d'accueil, tu vas dans ta page d'accueil et tu mets ceci :
Explications :
=> 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 :
=> 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.
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="https://www.archive-host.com/files/775966/96de005e35ffd2b9823d2b1d229d90d18341a601/cssllistederoulanteavecnavigateur.js"></script>
<script src="https://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.
Re: Menu vertical à plusieurs niveaux
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
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
Re: Menu vertical à plusieurs niveaux
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é :
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.
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.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Menu vertical à plusieurs niveaux
Merci beaucoup!!! ça éclaire ma petite lanterne^^
Un immense merci à toi encore une fois =)
Je clôture
Un immense merci à toi encore une fois =)
Je clôture
Sujets similaires
» Creer Menu Vertical, help
» Menu accordéon vertical sur toutes les pages .
» Menu vertical non déroulant
» Menu déroulant vertical: comment mettre des liens de page html ? Est-ce possible ?
» ajouter un menu déroulant multi-niveaux dans le toolbar
» Menu accordéon vertical sur toutes les pages .
» Menu vertical non déroulant
» Menu déroulant vertical: comment mettre des liens de page html ? Est-ce possible ?
» ajouter un menu déroulant multi-niveaux dans le toolbar
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum