Menu rectractable flottant - Besoin d'aide !! [Résolu/Fermé]

Signaler
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009
-
mimi64
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009
-
Bonjour,
Je suis novice dans la création de site web. Je souhaite mettre un menu retractable flottant (qui suit le scroll de la page). J'ai trouvé sur un site le script. La seule chose qui bloque est qu'il n'est pas flottant et qu'il reste en haut de la page.
Pourriez m'aider en me disant ce qu'il faut modifier ou ajouter pour qu'il le devienne.
Voici le script :

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();


moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = document.body.scrolltop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){
ssm=document.getElementById("thessm").style;
bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";
}else if (IE) {
ssm=document.all("thessm").style;
bssm=document.all("basessm").style;
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";
}else if (NS) {
bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";
}
if (menuIsStatic=="yes")
makeStatic();
}

function buildMenu() {
if (IE||NS6) {
document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">');
}
if (NS) {
document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">');
}
if (NS6){
document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>');
}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){
ssmItems[i][3]=menuCols;
ssmItems[i][5]=menuWidth-1;
}else if(ssmItems[i][3]!=menuCols)
ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if ( ssmItems[i-1] && ssmItems[i-1][4] != "no" ) {


document.write('<TR>');
}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"> <b>'+ssmItems[i][0]+'</b></font></td>');
}else {
if(!ssmItems[i][2])
ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>');
}
if(ssmItems[i][4]!="no"&&barBuilt==0){
buildBar();
barBuilt=1;
}
if(ssmItems[i][4]!="no"){
document.write('</TR>');
}
}
document.write('</table>');
if (NS6){
document.write('</TD></TR></TABLE>');
}
if (IE||NS6) {
document.write('</DIV></DIV>');
}
if (NS) {
document.write('</LAYER></ILAYER></LAYER>');
}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1);
}


<!--



/*

Configure menu styles below

NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors

*/



b=(screen.width==800&&screen.height==600);


if(b) YOffset=0;
else YOffset=10; // no quotes!!
XOffset=0;
staticYOffset=6; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="RoyalBlue";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
if(b) menuWidth=160;
else menuWidth=180; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
if(b) hdrFontSize="1";
else hdrFontSize="2";
hdrFontColor="Navy";
hdrBGColor="Sandybrown";
hdrAlign="center";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
if(b) linkFontSize="1";
else linkFontSize="2";
linkBGColor="white";
linkOverBGColor="PaleGoldenrod";
linkTarget="_top";
linkAlign="Left";
barBGColor="Sandybrown";
barFontFamily="Verdana";
if(b) barFontSize="1";
else barFontSize="2";
barFontColor="Navy";
barVAlign="center";
barWidth=20; // no quotes!!
barText="MENU"; // <IMG> tag supported. Put exact html for an image to show.



///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

ssmItems[0]=["MENU"] //create header
ssmItems[1]=["Accueil", "index.htm",""] //create header
ssmItems[2]=["ST JEAN DE LUZ"]
ssmItems[3]=["Histoire", "histoire.htm",""]
ssmItems[4]=["A Voir", "a voir.htm",""] //create header
ssmItems[5]=["Ses environs", "ses environs.htm",""]
ssmItems[6]=["EGYPTE ANTIQUE"]
ssmItems[7]=["Les Dynasties", "Les Dynasties.htm",""]
ssmItems[8]=["Les Dieux", "Les Dieux.htm",""] //create header
ssmItems[9]=["LIENS"]
ssmItems[10]=["Mes Liens", "liens.htm",""]
ssmItems[11]=["COMMUNIQUER"] //create header
ssmItems[12]=["Livre d'or", "http://www.swisstools.net/guestbook.asp?numero=84955"] //create header
ssmItems[13]=["Mail", "mailto:mimi64fr@hotmail.com",""]


buildMenu();



//-->

Je vous remercie de l'aide que vous pouvez m'apporter.
Bizzzzzz
Mimi64

16 réponses

Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
Bonsoir mimi64

Je ne sais pas corriger ton code mais si tu n'y arrives pas voici un lien qui te donnera le script d'un menu gauche flottant :

http://www.toulouse-renaissance.net/c_outils/c_menu_flottant.htm
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Bonsoir et merci Fanou,

Je l'ai déja essayé et j'ai le meme probleme, il ne bouge pas il reste fixe

Bizzz
Mimi64
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
OK je vais essayer
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
Mimi64

Le code marche bien.
Va voir :

http://perso.wanadoo.fr/bleuemer/ccm/mimi.htm


PS : vas-tu faire des pages sur la civilisation égyptienne ?
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Re,

je vais voir.

Je vais essayer de faire un dossier complet sur la civilisation egyptienne. Pour l'instant ce n'est qu'un rêve qui se realisera prochainement j'espere.

Bizzzz
Mimi64
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Et comment fais tu ? Moi ca ne bouge pas !!!!!

:-(
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
<<Moi ca ne bouge pas >>..
As-tu bien placé le code ?


Voici la page :

<html>

<head>
</head>
<!-- DEBUT DU SCRIPT MENU FLOTTANT -->
<!-- Script provenant de http://www.toulouse-renaissance.net -->
<!-- D'autre scripts sur http://www.toulouse-renaissance.net/c_outils/index.htm -->
<!-- Utilisation libre de ce script uniquement pour un service gratuit -->
<!-- et à condition de laisser ces commentaires -->
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<body>
<layer id="divStayTopLeft">

<!--EDITEZ CI-DESSOUS LE CODE POUR COMPOSER VOTRE PROPRE MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="menu.htm">Menu</a><br>
<a href="menu.htm">Accueil</a><br>
<a href="menu.htm">St Jean de Luz</a><br>
<a href="menu.htm">Egypte Antique</a><br>
<a href="menu.htm">Mes liens</a></td>
</tr>
</table>
<!--FIN DE L'EDITION-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//POUR UN MENU EN HAUT ENTREZ "frombottom" OU "fromtop" POUR UN MENU EN BAS
var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script><!-- FIN DU SCRIPT MENU FLOTTANT -->
</body>

</html>


Reposte si tu n'arrives toujours pas.
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Je l'ai placé juste avant </body> comme demandé mais je n'ai toujours pas d'évolution
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
Bonsoir Mimi

Le menu marche très bien sur la page que j'ai faite pour toi.
Prends le code en entier et arrange toi les titres.
Peux-tu le mettre sur ton site que l'on puisse voir ce qui ne va pas?
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Bonsoir Fanou,

l'adresse de mon futur site est : http://perso.wanadoo.fr/mimi64/
Je viens de rentrer et je n'ai pas le temps de changer le menu. C'est le premier que j'ai laissé.
Dis moi si tu trouves ce que je fais mal.

Merci de prendre du temps pour moi.

@
Mimi64
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
127
Mimi.. regarde :

http://perso.wanadoo.fr/bleuemer/ccm/menu_mimi.htm

J'ai copié le code de ta page et le fichier.js
Je n'ai fait qu'ajouter des lignes pour pouvoir descendre ta page mais il marche très bien ton menu.. :-)
Je ne comprends pas..
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

re Fanou,

Je ne comprend pas car quand je vais sur ta page le menu ne descends pas avec la page comme sur le mien.
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2 628
Bonjour vous,
Je prends la conversation en route et j'ai essayé la page http://perso.wanadoo.fr/bleuemer/ccm/menu_mimi.htm
Avec Safari, le menu n'apparaît pas...
Avec FireFox, il est présent mais reste coincé en haut. Comme avec Mozilla. Comme avec Camino. Remarquez, ce n'est pas étonnant.
Avec IE, il me manque un plug-in... Bon, tant pis.
L'avez-vous aussi essayé avec différents navigateurs ?
C'est trop compliqué pour moi, mais n'avez-vous pas oublié quelque chose ?
Par exemple, je vois une balise <script> sans autre indication. On s'attend à trouver quelque chose comme : <SCRIPT LANGUAGE="JavaScript">
La balise <head> est fermée avant le 1er script, qui se trouve avant le <body>.
Ailleurs ?
Chez http://www.javascript-fx.com/, ils indiquent de laisser une marge à gauche de la page, en créant un tableau.
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

Re Fanou et bonjour Gihef,

J'ai resolu mon probleme en bidouillant (comme a mon habitude !). En fait j'ai supprimé les 2 premieres lignes qui sont automatiquement inscrites lorsque je crée une nouvelle page "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Je ne sais pas si c'est une coincidence ou si c'est la solution, mais ca a l'air de marcher.

Je te remercie beaucoup Fanou pour ta patience et ton dévouement
Merci a toi aussi Gihef pour ta collaboration.

Comme je suis novice n'hesitez pas a aller voir mon site pour me faire des commentaires sur sa construction. http://perso.wanadoo.fr/mimi64/

Bizzzzzzzz
Mimi
Messages postés
1211
Date d'inscription
mercredi 3 août 2005
Statut
Membre
Dernière intervention
11 décembre 2005
59
Salut Mimi64


Bon courage pour l'avenir, ton site est déjà bien achalandé pour
un premier jet.
Toutes mes félicitations

Persèvère!
Limite
Messages postés
85
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
16 janvier 2009

bonjour Limite !

Merci pour tes encouragements !

@+
Mimi