relooker les menu déroulant,est-ce possible?

[tron°legacy]

Bonsoirs,
j'ai tester les menus à barres déroulente sur un forum test: http://exemple-exemple.actifforum.com/, je ne fais pas de la pub car c'est un forum test, il est vide.
Serait-il possible de changer le design du menu comme sur ce forum : http://www.alderia.biz/forum.htm?(regarder les menu sur le forumtest.)Mais comment?

Merci d'avance,

zak74(ou tron°legacy)

[Invité]

Bonjour,

Vous auriez regardé le tutoriel que je vous ai donné jusqu'à la fin, vous auriez trouvé le menu horizontal caché auto-déroulant ... https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant.

Il est tout de même difficile d'expliquer les choses mieux que dans le tuto...
Ouvrez votre bloc-note, ou notepad++, ou un traitement de texte. Faites 3 documents:
le script, le CSS et le menu. Copiez/collez les codes ci-dessous.

Document 1: le script, il ne faut pas y toucher.

Code:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
   for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
   }
if (d) {d.style.display='block';}
}
//-->
</script>

Document 2: la partie CSS gère le style des onglet et le contenu, j'ai personnalisé un peu le menu pour que les onglets soient arrondis en haut.

Code:

<style type="text/css" media="screen">
<!--
body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu dl {
    float: left;
    width: 150px;
}
#menu dt {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    color: #000000;
    text-align: center;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    margin: 0px;olid gray;
    margin: 0px;
}
#menu dt:hover{
    border-bottom: none!important;
}

#menu dd {
    display: none;
    border: 1px solid gray;
    border-top: none!important;}

#menu li {
    text-align: center;
    background: #ccc;
}

#menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    color: #000000;
    text-align: center;
    width: 150px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    margin: 0px;
}
#site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ccc;
    padding: 5px;
    border: 1px solid gray;
}
-->
</style>


Document 3: le menu en lui même. Il y a beaucoup de choses à compléter dans cette partie.

Code:

<div id="menu">
<dl>         
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>

</ul>
</dd>
</dl>
   
   
<dl>   
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>

</ul>
</dd>

</dl>

   
<dl>   
<dt onmouseover="javascript:montre('smenu3');">[color=orange]Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>

<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

   
<dl>   
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="">Sous-Menu 4.1</a></li>
<li><a href="">Sous-Menu 4.2</a></li>

<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
   

</div>

Je vous montre l'exemple avec le premier onglet, à vous de faire les autres, tout ce qui est en orange ou en bleu doit être modifié:

<dl>
<dt onmouseover="javascript:montre('smenu1');">Nom de l'onglet</dt>
<dd id="smenu1">
<ul>
<li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li>
<li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li>
<li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li>
<li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li>
<li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li>
</ul>
</dd>
</dl>

Pour ôter un onglet, on enlève:

Code:

<dl>         
<dt onmouseover="javascript:montre('smenu1');">Nom de l'onglet</dt>
<dd id="smenu1">
<ul>
<li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li>
<li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li>
<li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li>
<li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li>
<li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li>
</ul>
</dd>
</dl>

Pour rajouter un onglet, on prend le même code et on le colle à la fin avant le </div>
Pour ôter un sous-menu on enlève:

Code:

<li><a href="">nom de la page</a></li>

Pour ajouter un sous-menu on prend le même code et on le colle avant le </ul>

Une fois toutes le modifications faites, réunissez vos 3 documents en un seul en les mettant dans l'ordre suivant: le script puis le CSS et enfin le menu. Copiez l'ensemble de ce document et rendez-vous sur votre forum dans Panneau d'admin' > Affichage > Templates.
Dans la rubrique Général cliquez sur Overall_header.
Cherchez ceci:

Code:

td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Collez votre code complet après le </table> , attention à ne rien supprimer! Enregistrez le template puis publiez-le. Essayez de l'installer sur votre forum test, et dites-nous les modifications que vous voulez apporter en plus.

Cordialement.

[tron°legacy]

merci beaucoup!!! enfaite, c'était pas que je n'aivais pas lu le tuto jusqua la fin, je voulais comprendre comme sa marche, pour qu'ensuite, c'est moi qui change selon mes envies.