Menu pour page web super-paramétrable

Soyez le premier à donner votre avis sur cette source.

Vue 110 014 fois - Téléchargée 12 386 fois

Description

Sur ce menu, vous pouvez changer les couleurs, décidez s'il est horizontal ou vertical, activez le scrolling, mettez une image de fond, .... C'est incroyable ce que l'on peut faire avec du JavaScript.

/ ! \
Je préviens que ce menu n'est pas de moi, il vient du site http://www.milonic.co.uk/menu/
/ ! \

Source / Exemple :


/*
 Milonic DHTML Website Navigation Menu - Version 3.x
 Written by Andy Woolley - Copyright 2002 (c) Milonic Solutions Limited. All Rights Reserved.
 Please visit http://www.milonic.co.uk/menu or e-mail menu3@milonic.com for more information.
 
 The Free use of this menu is only available to Non-Profit, Educational & Personal web sites.
 Commercial and Corporate licenses  are available for use on all other web sites & Intranets.
 All Copyright notices MUST remain in place at ALL times and, please keep us informed of your 
 intentions to use the menu and send us your URL.

  • /
//The following line is critical for menu operation, and MUST APPEAR ONLY ONCE. If you have more than one menu_array.js file rem out this line in subsequent files menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<scr"+"ipt language=javascript>";for(a=1;a<menus.length;a++){mt+=" menu"+a+"=menus["+a+"];"}mt+="<\/scr"+"ipt>";_d.write(mt)} //Please leave the above line intact. The above also needs to be enabled if it not already enabled unless this file is part of a multi pack. //////////////////////////////////// // Editable properties START here // //////////////////////////////////// // Special effect string for IE5.5 or above please visit http://www.milonic.co.uk/menu/filters_sample.php for more filters effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777', Direction=135, Strength=5)" timegap=500 // The time delay for menus to remain visible followspeed=5 // Follow Scrolling speed followrate=40 // Follow Scrolling Rate suboffset_top=4; // Sub menu offset Top position suboffset_left=6; // Sub menu offset Left position closeOnClick = true style1=[ // style1 is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style. "navy", // Mouse Off Font Color "ccccff", // Mouse Off Background Color "ffebdc", // Mouse On Font Color "4b0082", // Mouse On Background Color "000000", // Menu Border Color 12, // Font Size in pixels "normal", // Font Style (italic or normal) "bold", // Font Weight (bold or normal) "Verdana, Arial", // Font Name 4, // Menu Item Padding "arrow.gif", // Sub Menu Image (Leave this blank if not needed) , // 3D Border & Separator bar "66ffff", // 3D High Color "000099", // 3D Low Color "Purple", // Current Page Item Font Color (leave this blank to disable) "pink", // Current Page Item Background Color (leave this blank to disable) "arrowdn.gif", // Top Bar image (Leave this blank to disable) "ffffff", // Menu Header Font Color (Leave blank if headers are not needed) "000099", // Menu Header Background Color (Leave blank if headers are not needed) "navy", // Menu Item Separator Color ] addmenu(menu=[ // This is the array that contains your menu properties and details "mainmenu", // Menu Name - This is needed in order for the menu to be called 20, // Menu Top - The Top position of the menu in pixels 200, // Menu Left - The Left position of the menu in pixels , // Menu Width - Menus width in pixels 1, // Menu Border Width , // Screen Position - here you can use "center;left;right;middle;top;bottom" or a combination of "center:middle" style1, // Properties Array - this is set higher up, as above 1, // Always Visible - allows the menu item to be visible at all time (1=on/0=off) "left", // Alignment - sets the menu elements text alignment, values valid here are: left, right or center , // Filter - Text variable for setting transitional effects on menu activation - see above for more info , // Follow Scrolling - Tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off) 1, // Horizontal Menu - Tells the menu to become horizontal instead of top to bottom style (1=on/0=off) , // Keep Alive - Keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off) , // Position of TOP sub image left:center:right , // Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable) , // Right To Left - Used in Hebrew for example. (1=on/0=off) , // Open the Menus OnClick - leave blank for OnMouseover (1=on/0=off) , // ID of the div you want to hide on MouseOver (useful for hiding form elements) , // Background image for menu when BGColor set to transparent. , // Scrollable Menu , // Reserved for future use ,"Home","http://www.dynamicdrive.com",,"Back to the home page",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar" ,"News&nbsp;sites&nbsp;&nbsp;","show-menu=news",,"",1 ,"Webmaster&nbsp;&nbsp;","show-menu=webmaster",,"",1 ,"Downloads&nbsp;&nbsp;","show-menu=downloads",,"",1 ,"Search&nbsp;&nbsp;","show-menu=search",,"",1 ,"Other&nbsp;&nbsp;","show-menu=other",,"",1 ]) addmenu(menu=["news", ,,120,1,"",style1,,"left",effect,,,,,,,,,,,, ,"General","show-menu=generalnews",,,1 ,"Technology","show-menu=technonews",,,1 ]) addmenu(menu=["generalnews", ,,170,1,"",style1,,"left",effect,,,,,,,,,,,, ,"CNN","http://www.cnn.com",,,0 ,"MSNBC","http://www.msnbc.com",,,0 ,"ABC News","http://www.abcnews.com",,,0 ,"Vancouver Local News","show-menu=canadanews",,,0 ,"BBC News","http://news.bbc.co.uk",,,0 ]) addmenu(menu=["canadanews", ,,120,1,"",style1,,"left",effect,,,,,,,,,,,, ,"CTV News","http://www.ctvnews.com",,, ,"Vancouver Sun","http://www.canada.com/vancouver/vancouversun/",,, ]) addmenu(menu=["technonews", ,,110,1,"",style1,,"left",effect,,,,,,,,,,,, ,"TechWeb","http://www.cnn.com",,,0 ,"News.com","http://www.news.com",,,0 ,"Wired News","http://www.wired.com",,,0 ,"Slashdot","http://www.slashdot.com",,,0 ]) addmenu(menu=["webmaster", ,,170,1,"",style1,,"left",effect,,,,,,,,,,,, ,"<img src=newsimage.gif border=0>&nbsp;(aq) Domain Names","http://www.a-q.co.uk swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;Dynamic Drive","http://www.dynamicdrive.com swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;JavaScript Kit","http://www.javascriptkit.com swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;Freewarejava.Com","http://www.freewarejava.com swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;Active-X.com","http://www.active-x.com swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;Web Monkey","http://www.webmonkey.com swapimage=newsimage_over.gif",,,1 ,"<img src=newsimage.gif border=0>&nbsp;Jars","http://www.jars.com swapimage=newsimage_over.gif",,,1 ]) addmenu(menu=["downloads",,,120,1,,style1,0,"left",effect,0,,,,,,,,,,, ,"Download.com","http://www.download.com",,,1 ,"Tucows","http://www.tucows.com",,,1 ]) addmenu(menu=["search", ,,140,1,"",style1,,"",effect,,,,,,,,,,,, ,"<img src=google_icon.gif border=0>&nbsp;Google.com", "http://www.google.com",,,1 ,"<img src=yahoo_icon.gif border=0>&nbsp;Yahoo", "http://www.yahoo.com",,,1 ,"<img src=av_icon.gif border=0>&nbsp;Altavista", "http://altavista.com",,,1 ,"<img src=excite.gif border=0>&nbsp;Excite", "http://www.excite.com",,,1 ]) addmenu(menu=["Other",,,140,1,,style1,0,"left","randomdissolve(duration=0.5);Shadow(color='#999999', Direction=135, Strength=5)",0,,,,,,,,,,, ,"Menu Authors Site","http://www.milonic.co.uk/menu/",,"Milonic DHTML Menu Site",1 ]) dumpmenus()

Conclusion :


Vous pouvez allez voir les autres styles de menus sur http://www.milonic.co.uk/menu/

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
3
Date d'inscription
mercredi 11 juillet 2007
Statut
Membre
Dernière intervention
26 septembre 2007

salut, je suis une novice en programation, quelqu'un peut me dire ce que je dois changer pour rendre ce menu vertical.
merci d'avance.:)
Messages postés
8
Date d'inscription
dimanche 27 juin 2004
Statut
Membre
Dernière intervention
30 septembre 2007

Bof.. il fait correctement ce pour quoi il est fait mais personnellement je préfere nettement ce CodeSource de menu la:

http://www.javascriptfr.com/codes/MENU-HORIZONTAL-DYNAMIQUE-AVEC-SOUS-MENUS-AVEC-FONDU_26166.aspx

Beaucoup plus simple à remanier, plus claire, beaucoup plus leger (on passe de 40Ko à 5Ko avec celui-ci..)
Pourquoi se faire "chier" avec 40Ko de code alors qu'avec 5Ko on peut faire la meme chose, rien que cette raison me suffit..

Maintenant sans doute que les 40Ko c'est la facilité, tout comme lightbox, on peut faire la même chose en prenant dix fois moins de place et en étant plus personnalisable encore.. mais pourtant bien des gens préfere lightbox tout simplement parce qu'ils font copier coller et puis ca marche. Question de choix comme je disais.

Mais cette source reste bonne bien que je ne l'utiliserai jamais.
Messages postés
1
Date d'inscription
mardi 5 juin 2007
Statut
Membre
Dernière intervention
25 juin 2007

Personnellement, j'ai un problème, j'ai beau modifier mais le menu reste toujours le même. J'ai mis dans mon index.php ces deux lignes:

<SCRIPT language=JavaScript src="menu_array.js",'_self' type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="mmenu.js",'_self' type=text/javascript></SCRIPT>

je n'ai rien modifié dans mmenu.js et dans menu_array.js j'ai mis:

,"Acceuil","http://behemoth68.free.fr",,"Back to the home page",1 // "Retour à la page d'acceuil", "http://behemoth68.free.fr", "http://behemoth68.free.fr", "Status", "Separator Bar"
,"News","http://behemoth68.free.fr/news",,"Go to news page",1 // "Aller à la page des news", "http://behemoth68.free.fr/news", "http://behemoth68.free.fr/news", "Status", "Separator Bar"
,"Webmaster ","show-menu=webmaster",,"",1
,"Downloads ","show-menu=downloads",,"",1
,"Search ","show-menu=search",,"",1
])



addmenu(menu=["webmaster",
,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
," Qui suis-je?","http://behemoth68.free.fr/présentation.html swapimage=newsimage_over.gif",,,1
," Où me joindre?","http://behemoth68.free.fr/ou_me_contacter.html swapimage=newsimage_over.gif",,,1

])

addmenu(menu=["downloads",,,120,1,,style1,0,"left",effect,0,,,,,,,,,,,
," Fragmovies","http://behemoth68.free.fr/telechargement/fragmovie swapimage=newsimage_over.gif",,,1
," Logiciels","http://behemoth68.free.fr/telechargement/logiciel swapimage=newsimage_over.gif",,,1
," Autres","http://behemoth68.free.fr/telechargement/autres swapimage=newsimage_over.gif",,,1
])

addmenu(menu=["search",
,,140,1,"",style1,,"",effect,,,,,,,,,,,,
," Google.com", "http://www.google.com",,,1
," Yahoo", "http://www.yahoo.com",,,1
," Wikipedia", "http://fr.wikipedia.org/wiki/Accueil",,,1
])



dumpmenus()

J'ai toujours le même menu que d'origine, si quelqu'un peut m'aider => serial68@hotmail.fr
Messages postés
16
Date d'inscription
lundi 26 février 2007
Statut
Membre
Dernière intervention
3 mars 2007

Oups ! Beug...
Messages postés
16
Date d'inscription
lundi 26 février 2007
Statut
Membre
Dernière intervention
3 mars 2007

C'est super ! EXTRA ! On peut PAS faire mieux !!!!!!
Afficher les 105 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.