Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE


Information sur la source

Catégorie :Menu & Co Classé sous : menu navigation, menu, menu roulant Niveau : Initié Date de création : 23/05/2008 Vu / téléchargé: 6 927 / 507

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

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

  • <!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>
<!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.


 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de mehdikobra le 23/05/2008 14:19:43

trés simple ... !!et jolie

signaler à un administrateur
Commentaire de soumika le 23/05/2008 14:39:21

ohh  un trè super menu  mercii kobra

signaler à un administrateur
Commentaire de PetoleTeam le 23/05/2008 14:49:25

Bonjour,
Je n'ai pas pour habitude de commenter les sources, pas forcément les compétences, mais le moins que l'on puisse dire c'est que tu ne t'ai pas trop acharné sur ce code.

Tu aurais au moins pu le rendre compatible, et supprimer les références à document.layers EXCLUSIVEMENT NetScape 4, entre autre <SCRIPT language=JavaScript1.2>.

Copie à revoir donc
;O)

signaler à un administrateur
Commentaire de mehdikobra le 23/05/2008 16:05:34

Merci de cette remarque
ta suremment raison !!  
mé le JavaScript 1.2 et la version script la plus compatible
au navigateur de O2S !!!!

signaler à un administrateur
Commentaire de WhiteDwarf le 23/05/2008 19:16:05 5/10

Marche pas sur Firefox :(
Sinon c'est fonctionnel et sympa :)

signaler à un administrateur
Commentaire de nickadele le 26/05/2008 13:39:00 administrateur CS

M?me remarque que PetoleTeam !
Manque ?galement des ";"

signaler à un administrateur
Commentaire de hoummane le 05/06/2008 12:33:11 10/10

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 !!

signaler à un administrateur
Commentaire de hoummane le 05/06/2008 12:49:34

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 !!

signaler à un administrateur
Commentaire de mehdikobra le 05/06/2008 12:54:17

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 !!

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Ouvrir une page html sans afficher le menu "Fichier - Edition - Affichage ..." [ par Christophe ] Bonjour, Je voudrais ouvrir la première page de mon site sans le menu "menubar" c'est à dire : le menu suivant "Fichier - Edition - Affichage ..." Com Colle pour les pros du javascript [ par Manu ] Bonjour,je propose aux passionnés de javascript de relever un défi. J'ai téléchargé les fichiers pour un menu en DHTML/JavaScript (fichiers .css et Compatibilite [ par JB ] A grand dieu pardonnez moi de mon ignorance ! Plus serieusement, je suisdebutant programmeur (etudiant en BTS d'info, je n'avais que quelques basesde Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs Menu [ par ypothier ] Est-ce que quelqu'un peut me dire comment je peux faire pour mettre à jour une listBox sans reloader la page ?? Merci Menu [ par ypothier ] Est-ce que quelqu'un peut me dire comment je peux faire pour mettre à jour une listBox sans reloader la page ?? Merci Menu avec des div qui marche pas ss netscape... [ par seyev ] Salut ! j'ai un problème avec ce code... il ne fonctionne que sous IE et je voudrais qu'il fonctionne aussi sous netscape... Comment faire ??*** CODE MENU [ par lolokill666 ] G un probleme. G une page des cadre, la page principale "mainFrame" a des barres de défilement. Mais le menu n'en as pas car je trouve que ca ferait t Cherche aide en html ou javascript pour développement sur un catalogueur de CD [ par jlved ] Bonjour,Je développe une nouvelle version de AACD qui est un petit catalogueur de CD-Rom (freeware pour l'instant). Voilà mon pb :Je voudrais fournir


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,359 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.