begin process at 2012 05 28 13:48:15
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU GLISSANT

MENU GLISSANT


 Information sur la source

Note :
6 / 10 - par 2 personnes
6,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu horizontal, menu, menucontextuel, menu glissant Niveau :Débutant Date de création :18/05/2008 Date de mise à jour :30/05/2008 19:02:38 Vu / téléchargé :16 883 / 1 332
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
petit menu glissant situe a gauche de l'écran paramétrable      
                                                                        

Source

  • <html>
  • <head>
  • <title>menu gauche</title>
  • <style type="text/css">
  • .couleur {
  • color: white;}
  • BODY .bouton5{color: red;background-color:#B9A197;cursor:pointer}
  • BODY .bouton6{color:black;background-color:#B9B3a7;}
  • </style>
  • <SCRIPT>
  • var mngv=0
  • var magi='aller.jpg'
  • var magip='allerp.jpg'
  • function mng(){
  • var Table_Gauche=document.getElementById('mgauche')
  • if(mngv==1){
  • Table_Gauche.style.left=Table_Gauche.offsetLeft-10
  • if(Table_Gauche.offsetLeft<=-150){
  • mngv=0
  • magi='aller.jpg'
  • magip='allerp.jpg'
  • document.getElementById('fleche').src='aller.jpg'
  • return false
  • }
  • setTimeout("mng()",16)
  • }
  • if(mngv==0){
  • Table_Gauche.style.left=Table_Gauche.offsetLeft+10
  • if(Table_Gauche.offsetLeft>=0){
  • mngv=1
  • magi='retour.jpg'
  • magip='retourp.jpg'
  • document.getElementById('fleche').src='retour.jpg'
  • return false
  • }
  • setTimeout("mng()",16)
  • }}
  • </SCRIPT>
  • </head>
  • <body>
  • <table background= metale.jpg id="mgauche"
  • style='position:absolute;top:50px;left:-150px;width:185;height:200;z-Index:10'>
  • <tr><td><b>formation l'essentiel</b></td><td><img id="fleche" src=aller.jpg onMouseover=this.src=magip; onMouseout=this.src=magi; onclick=mng()></td>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>div</td></td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>class</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>tableau</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>formulaire</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>frame</td></tr>
  • <tr><td><b>liens</b></td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>oxo</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>ici</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>la</td></tr>
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>terre
  • <tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>m'entendez vous</td></tr>
  • <tr><td><b>video</b></td></tr>
  • </td></tr>
  • <tr><td><a href="mailto:batman_vs_spiderman.nul"><b>me contacter</b></a>
  • </td></tr>
  • <tr><td>
  • </td></tr>
  • </table>
  • </body>
  • </html>
<html>
<head>
<title>menu gauche</title>

<style type="text/css">
.couleur {
color: white;}
BODY .bouton5{color: red;background-color:#B9A197;cursor:pointer}
BODY .bouton6{color:black;background-color:#B9B3a7;}
</style>

<SCRIPT>

var mngv=0
var magi='aller.jpg'
var magip='allerp.jpg'

function mng(){

var Table_Gauche=document.getElementById('mgauche')

if(mngv==1){
Table_Gauche.style.left=Table_Gauche.offsetLeft-10
if(Table_Gauche.offsetLeft<=-150){
mngv=0
magi='aller.jpg'
magip='allerp.jpg'
document.getElementById('fleche').src='aller.jpg'
return false
}
setTimeout("mng()",16)
}

if(mngv==0){
Table_Gauche.style.left=Table_Gauche.offsetLeft+10
if(Table_Gauche.offsetLeft>=0){
mngv=1
magi='retour.jpg'
magip='retourp.jpg'
document.getElementById('fleche').src='retour.jpg'
return false
}
setTimeout("mng()",16)
}}

</SCRIPT>
</head>
<body>

<table background= metale.jpg id="mgauche"  
style='position:absolute;top:50px;left:-150px;width:185;height:200;z-Index:10'>

<tr><td><b>formation l'essentiel</b></td><td><img id="fleche" src=aller.jpg onMouseover=this.src=magip; onMouseout=this.src=magi;  onclick=mng()></td>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>div</td></td></tr>

<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>class</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>tableau</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>formulaire</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>frame</td></tr>

<tr><td><b>liens</b></td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>oxo</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>ici</td></tr>
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>la</td></tr>

<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>terre
<tr><td bgcolor=#B9B3A7 onmouseover=className='bouton5' onmouseout=className='bouton6'>m'entendez vous</td></tr>

<tr><td><b>video</b></td></tr>
</td></tr>
<tr><td><a href="mailto:batman_vs_spiderman.nul"><b>me contacter</b></a>
</td></tr>
<tr><td>
</td></tr>
</table>
</body>
</html>

 Conclusion

je l'aime bien mon script

 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


 Historique

18 mai 2008 22:18:34 :
petit oubli
19 mai 2008 12:47:37 :
petit modif
19 mai 2008 14:18:36 :
optimisation merci a lakichemole
20 mai 2008 12:39:39 :
très légère
30 mai 2008 19:02:38 :
r a s

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 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
Toutes les sources de la catégorie Menu & Co

 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 lakichemole le 19/05/2008 10:20:48

Salut le menu marche nikel, par contre qu'entends tu par "optimisation du code"?

Commentaire de kazma le 19/05/2008 12:05:32 administrateur CS

optimiser pou moi cela veut dire éviter le code inutile afin d'obtenir un minimum de code et aussi minimiser le nombre de fonction pour ce menu je n'ai créer qu'une fonction. entre autre je ne dit pas que ce code est le plus optimiser je dirait plutot que quand je créer j'essaie de penser de cette façon.

Commentaire de lakichemole le 19/05/2008 12:21:13 5/10

Ok en fait je te demandais ça car je trouvais le code pas très lisible et pas top (même si il marche nikel pour ton exemple). Mais je pense que si il a pour but d'être réutiliser je te propose 2 3 modifs:
    - "document.getElementById('mgauche')" tu l'utilise pas mal de fois je te propose de faire un petit var Table_Gauche=document.getElementById('mgauche'); et d'utiliser cette variable par la suite, c'est plus lisible ça prend moins de place et le jour ou tu veux changer l'id de cette table (ça arrivera souvent si on veut reprendre ton code avec un code existant) on ne change l'id que pour la déclaration de la variable.
    - la 2 ème modif "desoptimise" le code mais le gain en maintenabilité est conséquent je trouve, le but est de remplacer ton code en dure par des constante.
Par exemple tes images 'aller.jpg' deviendraient var ImgAller='aller.jpg'; Toute ces constante étant défini en haut de ton script.
Si bien que, encore une fois, si on réutilise ton code et que veux nos config (image class...) on a qu'à les changer dans les constante sans s'occuper du code et de parser le code à la recherche des image ou/et class que l'on veut changer.

Voilà :) juste des remarques constructives.
PS: oublie pas les ";" à la fin des instruction c'est pas obligatoire me dira tu mais bon c'est quand même plus mieux :)

Commentaire de kazma le 19/05/2008 14:25:18 administrateur CS

c'est fait j'ai ajouter la variable Table_Gauche=document.getElementById('mgauche') j'y avait pensé mai je n'y avait pas trouvé d'interet.tu m'en a donné un merci.

Commentaire de lakichemole le 19/05/2008 14:49:52

Ok donc tu veux optimiser à fond :) dans ce cas même pas la peine de mettre "var"  et tes variables renomme les avec des lettre toute simple au lieu de nom explicite en gros obfusque ton code ça donne ça en version "moche" :
F=0
A='aller.jpg'
B='allerp.jpg'
function F(){
T=document.getElementById('mgauche')
G=document.getElementById('fleche')
if(F==1){
T.style.left=T.offsetLeft-10
if(T.offsetLeft<=-150){
F=0
A='aller.jpg'
B='allerp.jpg'
G.src='aller.jpg'
return false
}
setTimeout("F()",16)
}
if(F==0){
T.style.left=T.offsetLeft+10
if(T.offsetLeft>=0){
F=1
A='retour.jpg'
B='retourp.jpg'
G.src='retour.jpg'
return false
}
setTimeout("F()",16)
}}

Grâce à cela tu gagne 169 octets sur ta page!!! Soit avec un 56k 0,003 seconde environ pour le téléchargement de la page!! Car évidement le traitement reste quand à lui aussi long!!
Tout ça pour dire que le jeux n'en vaut pas la chandelle il me semble mais c'est ton choix (si s'en est vraiment un et pas une flemingite aiguë).
Peut être pour du mobile ou chaque octet compte ? Le JS sur mobile commence juste à devenir inintéressante.

Commentaire de kazma le 20/05/2008 12:03:30 administrateur CS

il me plait le script lol

Commentaire de viking_force le 30/05/2008 14:43:46

bonjour,


Je voudrais pas avoir l'air de critiquer, mais tu es loin d'un code optimisé...

Faire un menu avec une structure en tableau c'est pas top top

Aucune cohérance dans le document, déclaration des styles un peu n'importe où (séparation du contenu/du style)

un javascript non déclaré et qui m'a l'air aussi portable qu'il est vieux..

Ce script fonctionne peut être mais ça sent l'assemblage de bout de code et cela montre les lacunes dans la construction d'une page web....

Commentaire de kazma le 30/05/2008 17:34:06 administrateur CS

a la demande general je vais retirer le mot optimise entre autre quand j'ai ecrit ce script j'ai plus pense a faire un script qui marche tres bien pour ca je pense que personne ne me contredira je l'ai mis dans un seul script pour que l'on ai rien a faire a par le placer dans une feuille et j' ai essayer je dit bien essayer car je n'essai pas d'avoir de pretentions donc j'ai essaye d'eviter de faire du script pour rien en essayant d'exploiter a font le javascript avec un peut de dom du css et bien evidement de l'html. du dhtml quoi. pour finir je ne suis pas graphiste si le tableau plait
pas on peut mettre un div a la place le script fonctionnera quand meme. pour moi l'interet c'est le script mais peut etre que lui aussi est pourri sais t'ont

Commentaire de lakichemole le 02/06/2008 09:15:57

Non c'est vrai il marche très bien et c'est déjà pas mal :)

Commentaire de viking_force le 03/06/2008 17:16:08

y'a rien de pourri :)
tout est toujours bon a prendre...pardon si tu l'a mal pris, je te donnais juste les points négatifs considérant le "code optimisé" qui m'a fait hérisser les poils du dos....

Et c'est malheure"ux a dire, mais c'est encore la mise en page par tableau qui offre le moins de différences entre navigateur (si on oublie le coté accessibilité du code pour les multiples navigateurs)

Et pour le javascript c'est pareil, je suis pas sur qu'il fonctionne sur les vieux IE.....

Commentaire de lakichemole le 03/06/2008 18:06:31

ça marche nikel sous un IE 6 en tout cas se qui est à mon avis représnte 90% des versions IE (hors IE7)

Commentaire de kazma le 03/06/2008 19:39:55 administrateur CS

il y a quand meme une chose pour laquelle je suis d accord avec toi c'est le fait d'avoir des lacunes dans la construction d'une page web. et par contre pour la portabilite au niveau des anciens navigateur je pense qu'elle doit etre bonne a moins d'etre sous windows 95 ou meme 98 et de n'avoir pas changer la version de son navigateur et j'avoue que c'est possible l'ayant vecu moi meme mais tres tres rare. finalement mon script ne semble pas si vieux que sa (lol)

Commentaire de alienat le 23/09/2010 07:04:57

Renommer vos images respectivement : aller allerp retour et retourp en 1 1p -1 et -1p et voici un code plus court :)



<html><head>
<script type="text/javascript">
var mngv=1;
function mng() {
var TAB=document.getElementById('mgauche');
TAB.style.left=TAB.offsetLeft+(4*mngv);
if((TAB.offsetLeft>0 && mngv==1) || (TAB.offsetLeft<=-152 && mngv==-1)) {
mngv=-mngv;
document.getElementById('fleche').src=magi[mngv];
return false;
}
setTimeout("mng()",1);
}
</script>
</head><body>
<table background="metal.png" id="mgauche" style="position:absolute; top:50px; left:-152px; width:185; z-index:10;" cellpadding="0" cellspacing="0" border="0">
<tr><td width="152"><b>Lien 1</b></td><td width="33"><img id="fleche" src="1.jpg" onMouseover="this.src=mngv+'p.jpg';" onMouseout="this.src=mngv+'.jpg';" onclick="mng();" /></td></tr>
<tr><td style="background-color:0000FF;">div</td><td>&nbsp;</td></tr>
<tr><td ><b>LIEN 2</b></td></tr>
<tr><td style="background-color:0000FF;">div</td><td>&nbsp;</td></tr></table>
</body></html>

Commentaire de cheznounours le 13/11/2011 17:41:58 7/10

bonjour,

je le trouve très bien se code
je m'en suis inspiré pour pouvoir développer ma domotique sur base arm
j'ai juste modifier afin que cela marche avec multi tableau

mng(div,num) num pour connaitre le numéro du div concerné
mngv[num] tableau des état des div

 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

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)