Dradra - Forum de test~


 

Partagez | 
 

 Menu suiveur rétractable

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
► La noble de Serdaigle ◄


Messages : 92
Date d'inscription : 02/01/2008
Localisation : Québec

Feuille de personnage
bla bla: lksdlksajnd
jsjhdkd: dfdsfsdgfg
ddfddd:

MessageSujet: Menu suiveur rétractable   Dim 9 Aoû - 23:15

Alors on commence par le template overall_header_new
Juste avant la balise
Code:
</head>
En laissant quelques lignes
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>
Quelques lignes après ~»
Code:
<!-- END html_validation -->
Insérer l'exemple si-dessous
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>
Puis, faire du 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;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tempsnouveau.forumotion.com
 

Menu suiveur rétractable

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Dradra - Forum de test~ :: Catégorie 3 :: 
Forum 3.1
-