Bonjour tout le monde !!
Vous vous appercevrez vite que je suis complètement nul en JavaScript (il faut dire que je n’ai pas beaucoup cherché à apprendre ce language).
J’aimerais mettre un menu (qui est normalement à gauche) en bas de la page ( http://www.web-creation-fr.com/javascript/index.php?id=7 ).
Ce sont les images de bases :
http://pihug12.free.fr/7/menu.gif[/img] http://pihug12.free.fr/7/menub.gif [img]http://pihug12.free.fr/7/top.gif
![http://pihug12.free.fr/7/menu.gif[/img]](http://pihug12.free.fr/7/menu.gif%5B/img%5D){kind=link}
Et ca se sont les images que j’aimerais mettre dans mon nouveau menu :
http://pihug12.free.fr/8/menu.gif[/img] http://pihug12.free.fr/8/menub.gif [img]http://pihug12.free.fr/8/top.gif
![http://pihug12.free.fr/8/menu.gif[/img]](http://pihug12.free.fr/8/menu.gif%5B/img%5D){kind=link}
J’ai fais des screenshots pour vous donner une idée si vous ne comprenez pas :
Vous pouvez voir le script à son exécution ici : http://www.web-creation-fr.com/javascript/voir.php?id=7
<style type="text/css">
<!--
#master {position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;}
#menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;}
#top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;}
#liens {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
.NavJump {font-family: arial; font-size: 10pt; color: #808080; text-decoration: none;}
a:link.NavJump {color : #808080;}
a:visited.NavJump {color : #808080;}
a:active.NavJump {text-decoration: none; color: #C0C0C0;}
a:hover.NavJump {text-decoration: none; color: #C0C0C0;}
-->
</style>
<script language = "javascript">
<!--
/*
Script amélioré, mis à jour pour NS6+ - Mozilla 1+ et commenté par le site WEB Creation.
Non testé pour NS4 mais devrait fonctionner.
D'autres scripts ?
>> http://www.web-creation-fr.com
Merci de laisser ces commentaires.
*/
// On définit 3 variables, selon les propriétés de calques gérées par le navigateur
var ie = document . all ? 1 : 0
var ns = document . layers ? 1 : 0
var ns6 = document.getElementById && !document.all ? 1 : 0
// Position en hauteur une fois le menu ouvert
var topOpen = 10;
// Position en hauteur lorsque le menu est fermé
var topClosed = 10;
var master = new Object("element")
master . curLeft = -120; // Position de départ du calque
master . curTop = 10; // Hauteur de départ du calque
master . gapLeft = 0;
master . gapTop = 0;
master . timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName) . timer);
if (eval(layerName) . curLeft != fromLeft) {
// Calcul position horizontale
if ((Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) < paceLeft) {
eval(layerName) . curLeft = fromLeft;
} else if (eval(layerName) . curLeft < fromLeft) {
eval(layerName) . curLeft = eval(layerName) . curLeft + paceLeft;
} else if (eval(layerName) . curLeft > fromLeft) {
eval(layerName) . curLeft = eval(layerName) . curLeft - paceLeft;
}
// Définition de la position horizontale du menu
if (ie) {
document . all[layerName] . style . left = eval(layerName) . curLeft;
}
if (ns) {
document[layerName] . left = eval(layerName) . curLeft;
}
if (ns6) {
document . getElementById(layerName) . style . left = eval(layerName) . curLeft;
}
}
if (eval(layerName) . curTop != fromTop) {
// Calcul position verticale
if ((Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) < paceTop) {
eval(layerName) . curTop = fromTop;
} else if (eval(layerName) . curTop < fromTop) {
eval(layerName) . curTop = eval(layerName) . curTop + paceTop;
} else if (eval(layerName) . curTop > fromTop) {
eval(layerName) . curTop = eval(layerName) . curTop - paceTop;
}
// Définition position verticale du menu
if (ie) {
document . all[layerName] . style . top = eval(layerName) . curTop;
}
if (ns) {
document[layerName] . top = eval(layerName) . curTop;
}
if (ns6) {
document . getElementById(layerName) . style . top = eval(layerName) . curTop;
}
}
eval(layerName) . timer = setTimeout('moveAlong("' + layerName + '",' + paceLeft + ',' + paceTop + ',' + fromLeft + ',' + fromTop + ')', 30)
} // Fin function MoveAlong
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName) . gapLeft = (Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) / motionSpeed;
eval(layerName) . gapTop = (Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) / motionSpeed;
// Ouvre le menu
moveAlong(layerName, eval(layerName) . gapLeft, eval(layerName) . gapTop, fromLeft, fromTop)
}
// Définition du menu à "fermé" lors de l'arrivée sur le site
var expandState = 0;
// Fonction Expand ()
function expand()
{
if (expandState == 0) { // si le menu est fermé
// Passe les paramètres d'ouverture à la fonction setPace qui contient la fonction d'ouverture "moveAlong()"
// setPace ("nom du calque", "position par rapport à la gauche", "position en hauteur", "vitesse d'ouverture")
setPace("master", 0, topOpen, 10);
// Modification de l'image "menu" :
if (ie) {
document . menutop . src = "7/menub.gif";
} else if (ns6) {
document . getElementById("img_menu") . innerHTML = "<img src=\"7/menub.gif\" border=\"0\" width=\"18\" height=\"70\">";
}
expandState = 1; // définition de l'état à "ouvert"
} else { // Si le menu est ouvert
setPace("master", -120, topClosed, 10); // Referme le menu
// Modification de l'image "menu" :
if (ie) {
document . menutop . src = "7/menu.gif";
} else if (ns6) {
document . getElementById("img_menu") . innerHTML = "<img src=\"7/menu.gif\" border=\"0\" width=\"18\" height=\"70\">";
}
expandState = 0; // définition de l'état à "fermé"
}
}
//-->
</script>
<div id="master">
<div id="menu">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand()" onfocus="this.blur()">
<div id="img_menu">
<img name="menutop" border="0" src="7/menu.gif" width="18" height="70">
</div>
</a>
</td>
</tr>
</table>
</div>
<div id="top">
<table border="0" width="120" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><img border="0" src="7/top.gif" width="120" height="6"></td>
</tr>
</table>
</div>
<div id="liens">
<table border="0" width="120" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" bgcolor="#808080" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="5">
<tr>
<td width="100%" bgcolor="#FFFFFF">
<a href="#" class="NavJump"><b>Lien 1</b></a><br>
<a href="#" class="NavJump"><b>Lien 2</b></a><br>
<a href="#" class="NavJump"><b>Lien 3</b></a><br>
<a href="#" class="NavJump"><b>Lien 4</b></a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<script language = "javascript">
<!--
if (ie) { var sidemenu = document . all . master; }
if (ns) { var sidemenu = document . master; }
if (ns6) { var sidemenu = document . getElementById("master"); }
// Fonction pour que le menu reste toujours visible lors du scroll
function FixY()
{
if (expandState == 0) {
if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topClosed; }
if (ns) { sidemenu . top = window . pageYOffset + topClosed; }
} else {
if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topOpen; }
if (ns) { sidemenu . top = window . pageYOffset + topOpen; }
}
}
// Fonction setInterval qui appelle toutes les 100 ms la fonction FixY qui détecte la position du menu et le remet en place s'il y a scroll
setInterval("FixY()", 100);
//-->
</script>
Petite précision : j’aimerais que le menu soit ouvert au démarrage de la page contrairement à l’autre.
Voila tout !
+++
pihug12 :sol: