Un menu de navigation latéral escamotable

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (mehdikobra)