begin process at 2012 02 12 20:25:21
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu navigation, menu, menu roulant Niveau :Initié Date de création :23/05/2008 Vu / téléchargé :11 929 / 944

Auteur : mehdikobra

Ecrire un message privé
Site perso
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

Commentaires et avis

Commentaire de mehdikobra le 23/05/2008 14:19:43

trés simple ... !!et jolie

Commentaire de soumika le 23/05/2008 14:39:21

ohh  un trè super menu  mercii kobra

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)

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

Commentaire de WhiteDwarf le 23/05/2008 19:16:05 5/10

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

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

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

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

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

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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,874 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales