1 Templates : Menu suiveur rétractable 14/5/2009, 00:44
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>
- 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 -->
- 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;
}
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.
Dernière édition par Final-Blond le 14/3/2010, 13:39, édité 2 fois