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

Ce site au démarrage

begin process at 2010 02 10 15:48:15

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE

Information sur la source

Note :

7,50 / 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é :9 146 / 780

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">
<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> 
<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> <BR>d<BR>u<BR> <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> '+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> <A HREF="'+thelink[i]+'" target="'+linktarget+'">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')}
//-->
</SCRIPT>
<TR>
<TD bgColor=#CCCCCC><FONT face=Arial
size=1> </FONT></TD>
</TR></TBODY></TABLE>
<SCRIPT language=JavaScript1.2>
if (document.all) {document.write('</DIV>')}
window.onload=positionmenu
</SCRIPT>
</LAYER>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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 !

Un menu de navigation latéral escamotable.htm 4 904 octets

Télécharger le zip

Sources de la même categorie

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU VERTICALE EN TRANSPARENCE par dlvains

MENU DÉROULANT EN IMAGES par dlvains

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU DÉROULANT EN IMAGES par dlvains

MENU PRINCIPAL par ali1987

MENU AVEC ROULETTE par jdmcreator

JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv

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

Derniers Blogs

[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja

TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

Forum

RE : COUPER UNE PARTIE DE CHAINE par nhervagault

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5