CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:49:42

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU SCROLL AU TOP MISE À JOUR

Information sur la source

Note :
Aucune note

Catégorie :Menu & Co Niveau :Initié Date de création :02/06/2003 Date de mise à jour :06/06/2003 08:54:27 Vu :16 405

Auteur : Deny

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Mise à jour du menu. IE5.5 ou 6 necessaires. Marche pas Mozilla Netscape7.

Menu qui reste au top à gauche quand on scrolle en bas ou à droite.Encadré sur fond bleu, qui apparait/disparait quand on clique sur l'écran. Une variable sert à ça. Peut passer à droite, revenir à gauche.
En cas de scroll le menu reste à gauche ou à droite.
La pos de droite dépend de la déf d'écran.
Les param de dim (larg/hauteur du menu) sont à entrer dans le script.
Les déf css des liens sont entrés en deux classes qui s'inversent automatiquement quand la souris passe dessus.
Ajout en plus aujourd'hui d'un chgmt de la couleur de bordure de menu quand on passe sur les liens de renvoi qui sont à l'intérieur. Chacun le sien...
Fonction document.styleSheets[0].rules[0].style.borderColor , donne accès ici au 1er elem de la 1ere table de css pour changer le style.
Et c'est toujours du javascript + dynamic html/css.

Source

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
var largecran = screen.width;
var largmenu = 200;
var hautmenu = 150;
posdroite = largecran - largmenu - 30;
var tst = true;
var onchg = 1;
var drtgch = 1;
function adroite() {
drtgch = 2;
ReplaceMenu();
}
function ReplaceMenu()
{
var offsetInfo = ""
var X = document.body.scrollLeft;
var Y = document.body.scrollTop;
if (drtgch == 1) {
menu.style.pixelLeft=X;
}
else {
menu.style.pixelLeft=posdroite;
}
menu.style.pixelTop=Y;
}
function change() {
if (tst == true)
{ if( onchg == 1)
{
menu.style.display='none';
onchg = 2;
}
else {
menu.style.display='inline';
onchg = 1;
}
}
}
document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
document.write("</style>");
</script>
<style ID='ST2' type="text/css">
#tab {width : 900px;}
p.lien1 {margin:2 2 2 0; border:2px darkred groove; color: blue; font-family:Arial, sans-serif;font-size:12px;}
p.lien1actif {margin:2 2 2 0; border:2px darkblue outset; color: red; background-color: yellow; font-family:Arial, sans-serif;font-size:12px;}
a.lien:link {
font-weight: 300;
text-decoration: underline;
width: 100%;
}
a.lien:active {
text-decoration: underline;
font-weight: 700;
}
a.lien:visited {
font-weight : 300;
text-decoration: none;
}
a.lien:hover {
color: red;
}
</style>
</HEAD>
<BODY style="cursor:hand" onClick="change();tst=true;" onscroll="ReplaceMenu();">
<DIV ID="menu" onClick="tst=false;">
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;ReplaceMenu();return false;">A gauche</a></span></p>
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkred';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.fr.yahoo.com">Yahoo</a></p>
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkgreen';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.altavista.fr">Alta vista</a></p>
</DIV>
<table id="tab">
<tr>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
<tr>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
</table>
<p>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
</p>
</BODY>
</HTML>

<HTML> 
<HEAD> 
<SCRIPT type="text/javascript">
var largecran = screen.width;
var largmenu = 200;
var hautmenu = 150;
<!------ menu à droite def d'ecran - la largeur - 30 px du bord --------->
posdroite = largecran - largmenu - 30;
<!------- var de test tst evite de sup le menu quand on clique dessus (=clique body)--------->
<!-----	onchg teste menu present ou non, drtchg s'il est à droite ------------>
var tst = true;
var onchg = 1;
var drtgch = 1;

function adroite() {
drtgch = 2;
ReplaceMenu();
}

function ReplaceMenu() 
{ 
var offsetInfo = "" 
var X = document.body.scrollLeft; 
var Y = document.body.scrollTop;
if (drtgch == 1) {
	menu.style.pixelLeft=X; 
	}
else {
	menu.style.pixelLeft=posdroite;
	}
menu.style.pixelTop=Y; 
} 

function change() {

if (tst == true)
	{ if( onchg == 1)
		{
		menu.style.display='none';
		onchg = 2;
		}
	else 	{
		menu.style.display='inline';
		onchg = 1;
		}
	}
}
document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
document.write("</style>");
</script>
<style ID='ST2' type="text/css">
#tab {width : 900px;}
p.lien1 {margin:2 2 2 0; border:2px darkred groove; color: blue; font-family:Arial, sans-serif;font-size:12px;}
p.lien1actif {margin:2 2 2 0; border:2px darkblue outset; color: red; background-color: yellow; font-family:Arial, sans-serif;font-size:12px;}
a.lien:link {
	font-weight: 300;
	text-decoration: underline;
	width: 100%;
	}
a.lien:active {
	text-decoration: underline;
	font-weight: 700;
	}
a.lien:visited {
	font-weight : 300;
	text-decoration: none;
	}
a.lien:hover {
	color: red;
	}
</style>
</HEAD> 
<BODY style="cursor:hand" onClick="change();tst=true;" onscroll="ReplaceMenu();">
<DIV ID="menu" onClick="tst=false;"> 
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;ReplaceMenu();return false;">A gauche</a></span></p>

<!------document.styleSheets[0].rules[0].style.borderStyle='Outset';document.styleSheets[0].rules[0] : represente le premier element de la premiere table de style.------->
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkred';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.fr.yahoo.com">Yahoo</a></p>
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkgreen';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.altavista.fr">Alta vista</a></p>
</DIV>
<table id="tab">
<tr>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
<tr>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
	<td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
</table>
	<p>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR> 
</p>
</BODY> 
</HTML>

Conclusion

de 57 lignes on est passé à 95.
soit 75 lignes de prog et menu.

Allez voir là :
<http://msdn.microsoft.com/library/default.as p?>

a+

Sources du même auteur

DHTML - MANIP CSS

OUVERTURE POPUP À URL ALÉATOIRE

96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...

BROWSER SNIFFER (RENIFLEUR)

DHTML SCROLLTOP

Toutes les sources de Deny

Sources de la même categorie

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de revinc le 02/06/2003 13:16:42

merci Dieu pour ce script que ô combien je vénérerai toute ma vie...

Ca va, j'ai contenté ton amour propre ?

bon script sinon mais po compatible netscape snif!

Commentaire de Deny le 02/06/2003 14:56:12

Bof, du moment qu'il est propre !
Et puis quand on en a pour les autres, on peut bien en avoir pour soi-même !!!

Commentaire de Deny le 02/06/2003 15:02:33

Note au utilisateurs :
Si vous prenez ce script, faites gaffe de pas vous planter. Par exemple au test avec la var tst, parce que s'il elle mal gèrée quand vous cliquez sur le menu, alors vous cliquez sur le body et vous faites disparaitre le menu !

Commentaire de Mprog le 24/12/2003 15:58:49

<HTML>
<HEAD>
<script type="text/javascript">
var largecran = screen.width;
var largmenu = 200;
var hautmenu = 150;

if (navigator.appVersion.indexOf("MSIE") != -1) {posdroite = largecran - largmenu - 30;} else {posdroite = largecran - largmenu - 39;}


var tst = true;
var onchg = 1;
var drtgch = 1;

function adroite() {
drtgch = 2;
ReplaceMenu();
}

function ReplaceMenu()
{
var offsetInfo = ""
var X = document.body.scrollLeft;
var Y = document.body.scrollTop;
//alert("sdfdsf");
if (drtgch == 1) {
document.getElementById("menu").style.left=X;
  }
else {
  document.getElementById("menu").style.left=posdroite;
  }
document.getElementById("menu").style.top=Y;
//--------------correction bug mozilla sur le scrolling
//setTimeout("ReplaceMenu()","100");

}

function change() {
if (tst == true)
  { if( onchg == 1)
    {
  document.getElementById("menu").style.display='none';
    onchg = 2;
    }
  else   {
    document.getElementById("menu").style.display='inline';
    onchg = 1;
    }
  }
}

document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
document.write("</style>");
//-------------correction bug mozilla sur le scrolling
//setTimeout("ReplaceMenu()","100");
</script>
<style ID='ST2' type="text/css">
#tab {width : 900px;}
p.lien1 {margin:2 2 2 0; border:2px darkred groove; color: blue; font-family:Arial, sans-serif;font-size:12px;}
p.lien1actif {margin:2 2 2 0; border:2px darkblue outset; color: red; background-color: yellow; font-family:Arial, sans-serif;font-size:12px;}
a.lien:link {
  font-weight: 300;
  text-decoration: underline;
  width: 100%;
  }
a.lien:active {
  text-decoration: underline;
  font-weight: 700;
  }
a.lien:visited {
  font-weight : 300;
  text-decoration: none;
  }
a.lien:hover {
  color: red;
  }
</style>
</HEAD>
<BODY style="cursor:hand" onClick="change();tst=true;" onscroll="ReplaceMenu();">
<DIV ID="menu" onClick="tst=false;">
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;ReplaceMenu();return false;">A gauche</a></span></p>


<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkred';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.fr.yahoo.com">Yahoo</a></p>
<p class="lien1" onmouseOver="this.className='lien1actif';document.styleSheets[0].rules[0].style.borderColor='darkgreen';document.styleSheets[0].rules[0].style.borderStyle='Outset';" onmouseOut="this.className='lien1';document.styleSheets[0].rules[0].style.borderColor='blue';document.styleSheets[0].rules[0].style.borderStyle='solid';"><a class="lien" href="http://www.altavista.fr">Alta vista</a></p>
</DIV>
<table id="tab">
<tr>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
<tr>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
  <td>ton texte-ton texte-ton texte-ton texte-ton texte</td>
</tr>
</table>
  <p>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>ton texte<BR>
<a href="www.yahoo.fr">yahoo le retour</a>
</p>
</BODY>
</HTML>

-----------------------------------------------------------------------------
marche sur mozilla 1.5 essayez le sur netscape ;)

Commentaire de Mprog le 24/12/2003 16:02:39

bon ya les couleur du menu qui ne change pas comme sur IE mais j'ais fait cela en 10 min :D

et j'ais la flemme d'installer netscape ;)

Commentaire de Mprog le 24/12/2003 16:08:29

a j'allais oublier il marche quand on utilise la scroll bar pas quand on utilise la mollette pour palier ce problemme je propose un seTimeout voila j'espere que j'ais rien oublié cette fois @++

Commentaire de gostsn le 27/07/2007 13:57:31

Et la compatibilité avec les différent navigateur???????
script donc inutile 0/10

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP