SOS-FORUM
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Yoda 5/3/2017, 20:12

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

Final-Blonde
Final-Blonde
Staff du forum
http://sansfil.forumactif.com/
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.



Dernière édition par Final-Blond le 14/3/2010, 13:39, édité 2 fois

ProgVal
ProgVal
Staff du forum
http://www.adminforum.fr.cr
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

Final-Blonde
Final-Blonde
Staff du forum
http://sansfil.forumactif.com/
Woups !

Merci ProgVal et un + réciproquement. Wink

Mario
Mario
(Membre)
http://nocoment.forumperso.com/index.htm
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 Cool

ProgVal
ProgVal
Staff du forum
http://www.adminforum.fr.cr
Yeehaa! final-blond, ma réputation a dépassé la tienne ^^

EDIT ZC : Arf...


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com

Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser