begin process at 2012 05 27 19:16:15
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DÉFILANT DHTML

MENU DÉFILANT DHTML


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :07/03/2003 Date de mise à jour :15/03/2003 20:17:18 Vu / téléchargé :30 729 / 2 624
Auteur : malalam

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

 Description

Ce petit menu vous permettra de faire défiler horizontalement de manière très fluide un menu. Il est contrôlé par des flêches 'gauche' et 'droite'.
Le mieux est de l'exécuter pour vous rendre compte par vous-même de l'effet (et d'amélioer l'ergonomie, quelque peu défaillante j'en conviens!).
Le code est simple à comprendre, je pense, je ne m'éternise donc pas ici...


 Conclusion

Un exemple de ce menu se trouve sur ce site :
http://pont-entente.org

Il s'agit du menu défilant du milieu.

 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 du même auteur

Source avec Zip ANIMATION SIMULANT UN DÉPLACEMENT EN PROFONDEUR
Source avec Zip Source avec une capture UN SLIDESHOW AVEC FADE-IN FADE-OUT DES VIGNETTES ET AFFICHAG...
Source avec Zip MENU DÉROULANT AVEC 'FADE' DE COULEURS DHTML
Toutes les sources de malalam

 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

Commentaires et avis

Commentaire de paradoxreal8 le 07/03/2003 19:44:42

WOW C génial
Un beau code qui marche pas

Commentaire de malalam le 09/03/2003 21:06:38 administrateur CS

J'ai oublié de préciser que ça ne fonctionnait pour lemoment que sous IE...
Je viens de le télécharger pour voir si j'avais fait une erreur mais non: tout marche très bien. Sous IE, donc...;-)

Commentaire de fifipil909 le 09/04/2003 20:24:05

c'est bien fait, ca fonctionne, mais sa sert pas a grand chose !

Commentaire de aminozis le 30/04/2003 00:08:52

ohhoho qu'il est beau ...serieux c ingenieux

Commentaire de malalam le 30/04/2003 09:02:48 administrateur CS

Merci :-)
Pour Aminozis : ben heu...tu t'attendais à quoi? A ce qu'il fasse le café? ;-) C'est un menu de navigation, point barre.

Commentaire de jjdagadir le 13/08/2003 18:13:11

ET PUIS LE CAFE EN PRINCIPE C EST APRES AVOIR FINI LE MENU...
LA CRITIQUE EST AISEE MAIS L ART EST DIFFICILE. IL ME SEMBLE QUE CHACUN AVEC UN PEU DE CONNAISSANCE PEU ADAPTER FACILEMENT UNE TELLE SOURCE OU TOUT EST QUASIMENT MACHE...
BRAVO ENCORE MALAMAM
KENAVO

Commentaire de malalam le 14/08/2003 09:52:44 administrateur CS

Ah putain, j'l'avais oublié celui-là!
Bah sincèrement, merci, ça fait plaisir, la matinée commence bien grâce à toi :D

Commentaire de tanbeo le 06/06/2006 22:19:58

Bonjour, c'est exactement le script que je recherchais mais avec uune compatabilité sous les autres navigateurs.
Me permet juste de relancé dessus car voyant la date de ce scri^pt, je me dis que qlq à bien du le faire évoluer depuis, non?

Commentaire de snakehill le 11/07/2006 04:16:07

Excellent ! ça fait quelques jours que je suis a la recherche de ce genre de script ! merci MALALAM ! :)
A quand la compatibilité avec Firefox ?

Commentaire de kazma le 10/08/2008 20:18:21 administrateur CS

<html>

modification pour rendre le script operationnel FF IE OPERA SAFARI

<!-- Date de création: 09/12/02 -->
<!-- Date de mise a jour: 10/08/008 par kazma -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Déroulant DHTML</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Johan Barbier">
</head>
<body>
<script language="JavaScript1.2">
// La fonction qui fait défiler le menu vers la gauche
cpt1=0;
function SL(texte)
{
a=document.getElementById(texte);
if (a.offsetLeft>=-450)
a.style.left=a.offsetLeft-1;
if (a.offsetLeft<-450)
return;
if (cpt1>20)
{
cpt1=0;
return;
}
cpt1++;
b=texte;
setTimeout('SL(b)', 1);
}
// La fonction qui fait défiler le menu vers la droite
cpt2=0;
function SR(texte)
{
a=document.getElementById(texte);
if (a.offsetLeft<=3)
a.style.left=a.offsetLeft+1;
if (a.offsetLeft>3)
return;
if (cpt2>20)
{
cpt2=0;
return;
}
cpt2++;
b=texte;
setTimeout('SR(b)', 1);
}
</script>
<div style="background:url(cadre/gauche.jpg); position: absolute; top: 274; left: 350;

height: 60; width: 30; cursor: hand" onMouseMove="SR('texte')"></div>
<div style="position: relative; top: 260; left: 392; width: 220; height: 60; background:

url('cadre/menucad.jpg'); z-index: 1">
<div style="position: relative; top: 5; left: 3; width: 214; height: 60; overflow: hidden;

z-index: 2; vertical-align: middle">
<span id="texte" style="position: relative; top: 5"><nobr><a href="#"><img

src="cadre/actub.jpg" border=0/></a><a href="formation.php" target="_self"><img

src="cadre/formationo.jpg" border=0/></a><a href="gpt.php" target="_self"><img

src="cadre/geomatiqueo.jpg" border=0/></a><a href="informatique.php" target="_self"><img

src="cadre/informato.jpg" border=0/></a><a href="documents.php" target="_self"><img

src="cadre/documento.jpg" border=0/></a><a href="projet.php" target="_self"><img

src="cadre/projeto.jpg" border=0/></a></nobr></span>
</div></div>
<div style="background:url(cadre/droite.jpg); position: relative; top: 200; left: 632;

height: 60; width: 30; cursor: hand" onMouseMove="SL('texte')"></div>

</body>
</html>

Commentaire de joffreycolor le 03/03/2009 08:39:05

trés utiles, mais comment remplacer l'image par du texte ?? plz

Commentaire de Hypsilum le 07/09/2009 14:54:45

Est-ce que quelqu'un sait quelle est la variable que je peu changer pour que le défilement se fasse moins rapidement?

Au sinon Très bon Script Merci à Malalan pour le Script et à Kazma pour les modifs!
J'ai eu un peu de difficultés pour le mettre en place, mais ça tourne!! (faut dire, je ne suis pas un grand expert du JavaScript ;-) )

@+

Commentaire de kazma le 07/09/2009 21:31:06 administrateur CS

modifie ces deux lignes

a.style.left=a.offsetLeft-1
a.style.left=a.offsetLeft+1

a lieux de mettre 1 met 0.5

Commentaire de kazma le 07/09/2009 21:37:29 administrateur CS

apres qq teste modifi plutot

setTimeout('SL(b)', 1);

et

setTimeout('SR(b)', 1);

a la place du 1 met une plus grande valeur

Commentaire de snakehill le 07/09/2009 22:02:18

Mais oubliez donc le javascript brute !
Passez au jQuery ! ^^

 Ajouter un commentaire

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,343 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)