Ce tutoriel a été publié par Final-Blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Avé à tous !

Tout d'abord, pour ce tutoriel, vous devez être AF (Admin Fondateur).
Nous irons dans le template "overall-header".
Nous utiliserons du JS, du HTML et du CSS.

Voici un tuto souvent demandé d'après ce que j'ai pu constater ailleurs et ici.
Il va vous permettre d'installer une barre de menus un peu de ce genre (uniquement dans le fonctionnement), qui par le hover (ou le click) sur l'un d'eux, propose une liste de sous-menus.
Les paramètres, intitulés et l'emplacement ne sont là qu'à titre d'exemple, à vous de réaliser cette barre à votre sauce.

Go to PA > Modules > Gestion des codes Javascript
Donner un titre, ex : mymenu
Cocher : "Sur toutes les pages" (pour une barre de menu)
Copier-coller :

Code:

function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
document.getElementById('smenu2').style.display='none';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';
document.getElementById('smenu5').style.display='none';
document.getElementById('smenu6').style.display='none';
}

Valider
Dans mon exemple, la barre contient 6 menus, mais vous pouvez en ajouter ou en ôter, l'essentiel étant de bien les faire coordonner avec leur rappel en HTML.

Ensuite, dans PA > Affichage > Templates > Général > overall-header
Rappel du js avant la balise < /head> (laisser quelques lignes avec ce qui précède)
Copier-coller l'url de la page js, ex :

Code:

<script type="text/javascript" src="http://url_page_javascript.js"></script>

Toujours dans le même template, chercher (Ctrl+F) la variable :

Code:

{GENERATED_NAV_BAR}

Juste à la place de cette variable, avant la balise < /td>, installer le HTML (en allant à ligne afin de le retrouver facilement pour les modifs) :

Code:

<table  border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td align="center"> <div id="menu">

<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt>Accueil</dt>
<dd id="smenu1">
<ul>
<li><a href="http://url-votre-forum.com/index.htm">Forum</a></li>
<li><a href="http://url-votre-forum.com/welcome-h11.htm" target="_blank">Accueil</a></li>
<li><a href="http://http://url-votre-forum.com/faq.htm" target="_blank">FAQ</a></li>
<li><a href="http://url-votre-forum.com/search.forum">Search</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">         
<dt>Membres</dt>
<dd id="smenu2">
<ul>
<li><a href="http://url-votre-forum.com/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://url-votre-forum.com/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">   
<dt>Profil</dt>
<dd id="smenu3">
<ul>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile">Infos</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://url-votre-forum.com/search.forum?search_id=watchsearch">Watch sujets</a></li>
<li><a href="http://url-votre-forum.com/search.forum?search_id=egosearch">My Posts</a></li>
</ul>
</dd>
 
</dl>
    
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">   
<dt>Messagerie</dt>
<dd id="smenu4">
<ul>
<li><a href="http://url-votre-forum.com/msg.forum?folder=inbox" target="_blank">In Box</a></li>
<li><a href="http://url-votre-forum.com/msg.forum?folder=sentbox" target="_blank">Sended Box</a></li>
<li><a href="http://url-votre-forum.com/msg.forum?folder=outbox" target="_blank">Waiting Box</a></li>
</ul>
</dd>
</dl>
    
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">   
<dt>Logs</dt>
<dd id="smenu5">
<ul>
<li><a href=http://url-votre-forum.com/login.forum?connexion">Log In</a></li>
<li><a href="http://url-votre-forum.com/login.forum?logout=true">Log Out</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=register">Register</a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></tbody></table>

Enregistrer > Publier
- Bien sûr, à la place de http://url-votre-forum.com mettre l'url de votre forum.
- Ce code target="_blank" permet d'ouvrir la page dans un autre onglet ou une autre fenêtre, à vous de voir pour quelle page il serait approprié.

Dernière étape, PA > Affichage > Couleurs > Feuille de style css
A part les intitulés correspondant au HTML, tout le reste n'est là qu'à titre d'exemple :

Spoiler:

Voilà, bien du plaisir avec ce petit tuto qui peut vous permettre de réaliser de jolies barres de menus, mais aussi autre chose.