Ce tutoriel a été publié par ProgVal & 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.

Bonsoir,

Tout d'abord ce menu a été rendu opérationnel par ProgVal.


Il ne suit pas étant seul sur la page HTML, mais il est bien suiveur sur les pages de votre forum en restant toujours en haut de la fenêtre du forum à gauche.

Alors on commence par le template overall_header_new
>> être l'AF >> PA >> Affichage >> Templates

Juste avant la balise

Code:

</head>

en laissant quelques lignes avec la dernière ligne au-dessus, copier-coller le javascript suivant :

Code:

   <script language="javascript">         
         // Creation des fonctions
         function deployer()
         {
            var menu_deploye=document.getElementById('menu_deploye');
            var menu_retracte=document.getElementById('menu_retracte');
            menu_deploye.style.display='block';
            menu_retracte.style.display='none';
         }
         function retracter()
         {
            var menu_deploye=document.getElementById('menu_deploye');
            var menu_retracte=document.getElementById('menu_retracte');
            menu_deploye.style.display='none';
            menu_retracte.style.display='block';
         }
   </script>

Toujours dans le même template, rendez-vous à la toute fin en laissant quelques lignes après :

Code:

<!-- END html_validation -->

copier-coller le code qui va vous permettre d'éditer le contenu du menu (ici ce qui est en exemple mais bien sûr vous pouvez y mettre ce que vous voulez) :

Code:

<table  border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td>
<div class="menu_retractable" id="menu_deploye" onclick="javascript: retracter()">
         <!-- Le menu déployé -->
                                    <a href="http://www.newgrounds.com/portal/view/480676" class="NavJump"><b>Newgrounds</b></a><br>
         <a href="http://www.youtube.com/" class="NavJump"><b>You Tube</b></a><br>
         <a href="http://www.dailymotion.com/fr" class="NavJump"><b>Dailymotion</b></a><br> 
         <a href="http://www.deezer.com/#music/radio" class="NavJump"><b>Deezer</b></a><br>
         <a href="http://www.wikipedia.fr/" class="NavJump"><b>Wikipedia</b></a><br>
         <a href="http://www.google.fr/" class="NavJump"><b>Google</b></a><br> 
      </div>
      <div class="menu_retractable" id="menu_retracte" onclick="javascript: deployer()">
         <!-- Le menu retracté -->
      </div>
</td></tr></tbody>
</table>

Et enfin le CSS qui vous permettra de gérer l'apparence du menu :
>> Affichage >> Images et Couleurs >> Couleurs >> onglet Feuille de style CSS

Code:

.menu_retractable {
overflow: hidden;
position: fixed;
top: 34px;
left: 1px;
background-color: #transparent;
background-image: url('http://img5.hostingpics.net/pics/648372gradient2vertic.png');
background-repeat: no-repeat;
height: 13%;
cursor: pointer;
color: #000000;
font-size: 11px; font-style: italic;
}
#menu_deploye {
width: 89px;
background-image: url('http://img3.hostingpics.net/pics/117195gradient2.png');
background-repeat: repeat;             
display: none;
padding-left: 7px;
padding-top: 25px;
padding-bottom: 25px;
}
#menu_retracte {
width: 10px;
}

Ici le paramétrage est celui de l'exemple plus haut, que vous pouvez bien sûr modifier à souhait.

Il faut faire attention que ce menu une fois déployé respecte le cadre du forum, donc il est bien utile pour des liens avec des titres courts.

Voilà, enjoy it.

Bonjour,

Petite correction de deux erreurs d'orthographe, petite correction de l'indentation, et suppression du [PHPBB2] à la fin du titre (c'est compatible avec toutes les versions; vous pouvez même le mettre sur un site ou vos pages HTML).

Et un petit +.

Cordialement,
ProgVal

Woups !

Merci ProgVal et un + réciproquement.

Merci a vous deux, j'ai installé ce menu sur mon forum et je trouve ça nickel me reste juste a le fignoler un peu.

Un + a chacun

Yeehaa! final-blond, ma réputation a dépassé la tienne ^^

EDIT ZC : Arf...