begin process at 2012 05 28 11:17:53
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SAUF IE6)

MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SAUF IE6)


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :Menu, Mootools, Animer Niveau :Débutant Date de création :27/04/2010 Date de mise à jour :28/04/2010 18:47:13 Vu / téléchargé :6 948 / 998
Auteur : Kimjoa

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

 Description

Cliquez pour voir la capture en taille normale
Après pas mal de recherche de menu, j'ai été surpris de pas trouver un me convenant, je l'ait donc créer et vous le fournie gratos ;)

note : J'arrive pas a animer les position les background sous ie (a testé avec la nouvelle version de mootools)

Source

  • window.addEvent("domready", function(){
  • $$('.menu').each(function(el){
  • new Menu(el, {
  • ulAnim : {
  • startStyles : {
  • left : 100,//les positions sont a utilisr avec parcimonie, elles peuvent entrainer des comportements inatendues
  • top : -100,
  • width : 0,
  • height : 0,
  • opacity : 0
  • },
  • delay : 1000,
  • duration : 500,
  • transition : Fx.Transitions.Cubic.easeOut
  • },
  • liAnim : {
  • endStyles : {
  • 'background-position' : '210px, 0'
  • },
  • notInBar : true,//pour ne pas animer les items de la bar horizontale
  • duration : 500,
  • transition : Fx.Transitions.Cubic.easeOut
  • }
  • });
  • });
  • });
window.addEvent("domready", function(){
		$$('.menu').each(function(el){
		    new Menu(el, {
				ulAnim : {
					startStyles : {
						left :  100,//les positions sont a utilisr avec  parcimonie, elles peuvent entrainer des comportements inatendues
						top :  -100,
						width : 0,
						height : 0,
						opacity : 0
					},
					delay : 1000,
					duration : 500,
					transition : Fx.Transitions.Cubic.easeOut
				},
				liAnim : {
					endStyles : {
						'background-position' : '210px, 0'
					},
					notInBar : true,//pour ne pas animer les items de la bar horizontale
					duration :  500,
					transition : Fx.Transitions.Cubic.easeOut
				}
							
			});
		});
	});


 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

28 avril 2010 18:39:20 :
correction de bug + ajout d'un style plus cool !
28 avril 2010 18:47:13 :
...

 Sources du même auteur

Source avec Zip SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER
Source avec Zip GETELEMENTSBYREG
Toutes les sources de Kimjoa

 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 WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

Commentaires et avis

Commentaire de jdmcreator le 28/04/2010 01:56:51

Bonjour,

Premièrement l'orthographe, ça aurait pu être mieux ^^

Je n'ai pas regardé la source, mais je me demandais si cela n'aurait pas été possible de poster une version sans framework parce que 80 KO (dont 67KO de Mootools) c'est beaucoup pour un simple menu.

Commentaire de Kimjoa le 28/04/2010 02:33:58

salut jdmcreator.

Pour l'orthographe, perso je 'en fiche un peux :) , l'important c'est le fond, pas la forme, et pis y'a combien de règle orthographique qui n'ont aucune correspondance phonétiquement :)

Sinon pour le framework ... on peux en débattre, mais pour moi c'est juste une question de commodité.... Perso, ca me dit rien de refaire un systême d'animation juste pour un menu. La plupart des site utilise des cms, qui embarque leur propre librairie js..... j'utilise souvent modx et joomla et bcp de plug-in utilise mootools qui justifie mon choix de la librairie.

Sinon une librairie ca sert avant tout a harmoniser les différence entre navigateur ... imagine si tu utilise plusieur scirpt sur ton site , tous stand alone, au final le poid serais sans doute plus consequent si tous, utilisé une libraire pour harmoniser les procédures...
Il y a aussi l 'argument de la cache.... 80Ko c'est vrai lors de la première visite sur le site, et encore juste si tu n'utilise pas google code.
Perso, je vois que des atouts a utiliser un framework...

a+

Commentaire de PetoleTeam le 28/04/2010 22:40:42

Bonjour,
tu n'as pas du chercher avec les bons mots clés, mais il est vrai que si tu te fiches de l'orthographe....
http://www.css-faciles.com/exemple-menu-deroulant2.htm
c'est un vrai sans JS.

mais si ton but est de mettre un peu d'animation à l'ouverture de ton menu dans ce cas change le titre de la source.

;O)

Commentaire de Kimjoa le 28/04/2010 22:50:18

lol PetoleTeam  je sais écrire menu sans faire de faute :)
Sinon le lien que tu fournie utilise du js pour ie6, tout comme le miens qui reste accessible sans js. Le but de mon script étant de donner un comportement plus naturelle, et aussi des animations....

Sinon il existe vraiment une solution pour faire un menu sans js avec ie6, il faut utiliser des table combiner avec des ul, et le menu est limiter en profondeur. -> http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html

Commentaire de Kimjoa le 28/04/2010 22:52:34

regarde le code source de la page présentant, ou enregistre la et garde y que le menu. Sinon ce site est celui d'un plug-in modx, et il explique la syntaxe pour générer le template....

Commentaire de tri2b21 le 27/05/2010 15:16:45 8/10

en tout cas merci
ce code m'a beaucoup aider

Commentaire de benja13280 le 08/01/2011 20:28:55 9/10

Très bonne source ! Ultra-paramétrable ! Très utile autant pour novices que pour professionnels. Merci
Un peu lourd en mémoire pour un menu

9/10

Commentaire de Kimjoa le 10/01/2011 02:28:01

salut  benja13280 merci pour t'as notes ;)
en faite c'est vrai que ça reste lourd... je pense savoir comment optimiser tout ça , c'est juste que j'ai pas trop le temps en ce moment, ... je pense qu'il faut jouer sur la délégation d'évènement ...
Je vais essayer de trouver le temps quand même  :-)
bye !!

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

Comparez les prix


Sony Ericsson XPERIA X10 (1 Go)
Entre 649€ et 649€

Visiter le guide achat

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 : 5,772 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)