Un menu de navigation latéral escamotable

Soyez le premier à donner votre avis sur cette source.

Vue 16 122 fois - Téléchargée 1 194 fois

Description

Un menu de navigation latéral qui apparaît et s'escamote au passage de la souris...Il faut simplement configurer ici la position du menu par rapport au bord supérieur soit var fromtop=xx
Pour comprendre un temps soit peu le script, il faut savoir que le menu de navigation
déroulant est un fait un simple tableau (écrit en Javascript) qui apparaît et disparaît au
passage de la souris.

Source / Exemple :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url = http://www.kobra.ie.ma  -->
<HTML><HEAD><TITLE>Un menu de navigation latéral escamotable.</TITLE>

<SCRIPT>
<!--
function highlight(x){
document.form.elements[x].focus();
document.form.elements[x].select();
}
//-->
</SCRIPT>

<SCRIPT language=JavaScript1.2>
// Script by maXimus at http://absolutegb.com/maximus/
function move(x) {
if (document.all) {
object1.style.pixelLeft += x;
object1.style.visibility = "visible"}
else if (document.layers) {
document.object1.left += x;
document.object1.visibility = "show"}};

// La position du menu par rapport au bord haut
var fromtop=80

function makeStatic() {
if (document.all) {object1.style.pixelTop=document.body.scrollTop+fromtop}
else {eval(document.object1.top=eval(window.pageYOffset+fromtop));}
setTimeout("makeStatic()",0);}
</SCRIPT>

<STYLE>
.nounderline {
	TEXT-DECORATION: none
}
.hl {
	CURSOR: hand; BACKGROUND-COLOR: yellow
}
.n {
	CURSOR: hand
}
.Style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #006633;
}
</STYLE>
</HEAD>
<BODY text=#000000 vLink=#000080 aLink=#ff0000 link=#000080 
bgColor=#ffffff><LAYER onmouseover=move(214) onmouseout=move(-214) left="0" 
bgcolor="black" name="object1" top="20" visibility="hide">
<SCRIPT language=JavaScript1.2>
function positionmenu(){
move(-214)
}
if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 10px ;Z-Index : 20" onmouseover="move(214)" onmouseout="move(-214)">')}
</SCRIPT>

<TABLE cellSpacing=1 cellPadding=0 width=230 bgColor=#000000 border=0>
  <TBODY>
  <TR>
    <TD bgColor=#CCCCCC>&nbsp;
      <div align="center"><FONT face=Arial size=3><B>Menu</B></FONT></div></TD>
    <SCRIPT language=JavaScript1.2>
document.write('<td align="center" rowspan="214" width="16" bgcolor="#FF9900"><span style="font-size:11px"><p align="center"><font face="Arial"><B>C<br>o<br>n<br>t<br>e<br>n<BR>u<BR>&nbsp;<BR>d<BR>u<BR>&nbsp;<BR>s<BR>i<BR>t<BR>e</B></font></p></span></TD>')
</SCRIPT>
  </TR>
  <SCRIPT language=JavaScript1.2><!--
if (document.all||document.layers) {
makeStatic();}

var text=new Array();
var thelink=new Array();

// Configurer les éléments du menu.

text[0]="Nouveaux scripts";
text[1]="Effets et animations de texte";
text[2]="Effets et animations d'images";
text[3]="Transitions de pages";
text[4]="Scrollers ou textes défilants";
text[5]="Liens, boutons et formulaires";
text[6]="Infobulles et menus de navigation ";
text[7]="Browsers et fenêtres";
text[8]="Dates et heures dynamiques";
text[9]="Pour le plaisir des yeux ";
text[10]="Scripts divers";

// Configurer les liens associés aux éléments du menu.
thelink[0]="http://www.kobra.ie.ma/";
thelink[1]="http://www.kobra.ie.ma/";
thelink[2]="http://www.kobra.ie.ma/";
thelink[3]="http://www.kobra.ie.ma/";
thelink[4]="http://www.kobra.ie.ma/";
thelink[5]="http://www.kobra.ie.ma/";
thelink[6]="http://www.kobra.ie.ma/";
thelink[7]="http://www.kobra.ie.ma/";
thelink[8]="http://www.kobra.ie.ma/";
thelink[9]="http://www.kobra.ie.ma/";
thelink[10]="http://www.kobra.ie.ma/";

// L'attribut target des liens (facultatif)
// Les valeurs acceptées sont '', 'new', or 'framename' (où 'framename' est le nom du frame de destination)
var linktarget=''

////////////////////////////////////////////////

function navigateie(which){
if (linktarget=='')
window.location=thelink[which]
else if (linktarget=='new')
window.open(thelink[which])
else{
temp_var=eval("window.parent."+linktarget)
temp_var.location=thelink[which]
}
}

for (i=0;i<=text.length-1;i++)
if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL>&nbsp;'+text[i]+'</FONT></TD></TR>')}
else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL>&nbsp;<A HREF="'+thelink[i]+'" target="'+linktarget+'">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')}

//-->
</SCRIPT>

  <TR>
    <TD bgColor=#CCCCCC><FONT face=Arial 
size=1>&nbsp;</FONT></TD>
  </TR></TBODY></TABLE>
<SCRIPT language=JavaScript1.2>
if (document.all) {document.write('</DIV>')}
window.onload=positionmenu
</SCRIPT>
</LAYER>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="Style1">Tout droit reserver 2008 (C)</p>
</BODY>
</HTML>

Conclusion :


Le script est peut-être un peu brouillon mais nous allons nous y retrouver.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

mehdikobra
Messages postés
24
Date d'inscription
mardi 6 novembre 2007
Statut
Membre
Dernière intervention
21 décembre 2009
-
wé !!
je suis un développeur O2S ( chez les moteur de recherche
siblés ) et c'amarche d'é avant chez mon post !!
en tous cas , tu sera remerci si vous permeté de m'uplodé
se plogin !! il vas BQ m'aidé !!
merci d'avance !!
hoummane
Messages postés
6
Date d'inscription
jeudi 5 juin 2008
Statut
Membre
Dernière intervention
6 juin 2008
-
bon !! c'amarche mtn chez O2S !! jé manipulé un plogin ki ma
aidé d'executé ce menu !!
bon , c'amarche trés bien !! mé .....
Marche pas sur Firefox !!
merci 2eme fois !!
hoummane
Messages postés
6
Date d'inscription
jeudi 5 juin 2008
Statut
Membre
Dernière intervention
6 juin 2008
-
bravo !! c' efficace ... mé la version 1.2 du javascript
ne peu pas (toujour) étre compatible
au navigateur de O2S !!!!
je suis un dévellopeur O2S , et jé des trukk JS 1.2 ki marche
pa chez O2S !!
grosso modo ,merci !!
nickadele
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013
-
M?me remarque que PetoleTeam !
Manque ?galement des ";"
WhiteDwarf
Messages postés
510
Date d'inscription
samedi 29 décembre 2001
Statut
Membre
Dernière intervention
23 mai 2008
-
Marche pas sur Firefox :(
Sinon c'est fonctionnel et sympa :)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.