Dradra ► La noble de Serdaigle ◄
| Sujet: 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; } |
|