Menu rectractable flottant - Besoin d'aide !!

Résolu/Fermé
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009 - 23 août 2005 à 22:00
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009 - 25 août 2005 à 17:02
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
A voir également:

16 réponses

fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
23 août 2005 à 23:03
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
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
23 août 2005 à 23:06
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
0
fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
23 août 2005 à 23:16
OK je vais essayer
0
fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
23 août 2005 à 23:33
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 ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
23 août 2005 à 23:36
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
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
23 août 2005 à 23:37
Et comment fais tu ? Moi ca ne bouge pas !!!!!

:-(
0
fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
24 août 2005 à 00:25
<<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 https://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.
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
24 août 2005 à 00:31
Je l'ai placé juste avant </body> comme demandé mais je n'ai toujours pas d'évolution
0
fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
25 août 2005 à 00:06
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?
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
25 août 2005 à 00:25
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
0
fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
25 août 2005 à 01:07
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..
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
25 août 2005 à 01:10
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.
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
25 août 2005 à 02:14
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.
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
25 août 2005 à 03:05
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
0
limite Messages postés 1207 Date d'inscription mercredi 3 août 2005 Statut Membre Dernière intervention 11 décembre 2005 67
25 août 2005 à 03:10
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
0
mimi64 Messages postés 85 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 16 janvier 2009
25 août 2005 à 17:02
bonjour Limite !

Merci pour tes encouragements !

@+
Mimi
0