begin process at 2012 02 11 04:55:03
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILISANT LES CSS, COMPATIBLE IE ET NETSCAPE

MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILISANT LES CSS, COMPATIBLE IE ET NETSCAPE


 Information sur la source

Note :
7,25 / 10 - par 4 personnes
7,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu, vertical, css, cascade, compatible Niveau :Initié Date de création :09/11/2006 Date de mise à jour :10/11/2006 14:27:09 Vu / téléchargé :28 463 / 5 574
Auteur : LUDINSKI

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

 Description

Cliquez pour voir la capture en taille normale
Contient des classes permettant de créer un menu vertical, utilisant les classe de style CSS et pouvant contenir des images.
J'ai repris le fonctionnement du menu contextuel que j'avais posté sur ce site.


 Conclusion

Un document Word expliquant le fonctionnement ainsi qu'un exemple sont inclus dans le zip ;)

 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

10 novembre 2006 14:27:09 :
Suppression de fonctions non compatibles dans la page d'exemple

 Sources du même auteur

Source avec Zip FONCTION PERMETTANT D'INDIQUER À UN ÉLÉMENT QU'IL PEUT ÊTRE ...
Source avec Zip Source avec une capture UN TOOL TIP (BULLE D'AIDE) COMPATIBLE IE ET MOZILLA, MODIFIA...
Source avec Zip Source avec une capture UNE TREEVIEW GÉNÉRÉE DYNAMIQUEMENT, UTILISANT LES STYLES CSS...
Source avec Zip Source avec une capture MENU CONTEXTUEL EN CASCADE GÉNÉRÉ DYNAMIQUEMENT, UTILISANT L...
Toutes les sources de LUDINSKI

 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 MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture [MEC] MENUS EN CSS par Bul3
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
Source avec Zip Source avec une capture MENU DÉROULANT (JE SAIS.... ENCORE...) EN JAVASCRIPT & CSS. par inami

Commentaires et avis

Commentaire de tito17 le 10/11/2006 10:10:48

Bonjour,

Il existe un problème sur ie6 (ne fonctionne pas), sur netscape 7 aussi
Cela fonctionne sur firefox,netscape 8, opéra 9.02.

Il pourrait être bien sinon.

Commentaire de LUDINSKI le 10/11/2006 13:18:55

Salut tito

Je l'ai testé sous FireFox et IE6 et tout fonctionne correctement !!
Pourrais-tu être plus précis sur l'erreur ?!

Commentaire de tito17 le 10/11/2006 13:53:54

Ludinski,

voici l'erreur que j'ai :
Ligne : 40
Car : 4
Erreur : 'style' a al valeur Null ou n'est pas un objet.
Code : 0

Commentaire de LUDINSKI le 10/11/2006 14:25:37

Voilà, j'y ait remédié

J'ai supprimé les fonctions qui repositionnaient le menu, que j'avais mis dans l'exemple

Ca m'étonne quand même que chez moi, il ne dise rien !

Commentaire de tito17 le 10/11/2006 15:02:26

Toujours pas !
Nouvel erreur :

Ligne : 2
Car : 1
Erreur : Caractère incorrect
Code : 0

Ligne : 51
Car : 4
Erreur : 'mainMenu' a valeur Null ou n'est pas un objet.
Code : 0

Désolé.

Par contre j'ai trouvé quelquechose pour que cela marche :
il faut déclarer correctement ta page Exemple.html en écrivant ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
... et la ton code initial... et ça marche chez moi !
</body>
</html>

Commentaire de tito17 le 10/11/2006 15:03:20

j'ai enlevé aussi l'accent sur Création Menus.js

Commentaire de LUDINSKI le 10/11/2006 17:07:30

J'ai essayé avec ton code, mais FireFox ne digère pas !!

De toutes façons le problème de compatibilité n'est pas au niveau du code javascript... mais au niveau du codage de la page

Donc, pour afficher correctement l'exemple, il te suffit de changer le codage de ton explorateur :
sous IE : Affichage/Codage/Europe occidentale (Windows)
sous Firefox : Affichage/Encodage des caractères/occidentale (ISO-8859-1)
Tu dois certainement être en UFT8

Je vais quand même me pencher sur ce problème... merci

Commentaire de tito17 le 10/11/2006 18:04:56

Avec ce code ça marche bien partout !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<!-- Importe la feuille de style des menus -->
<link rel="stylesheet" type="text/css" href="Styles.css" />

<!-- Importe les sources du menu contextuel -->
<script src="Menus/MenuContext.js"></script>
<script src="Menus/MainMenu.js"></script>
<script src="Menus/Menus.js"></script>
<script src="Menus/Items.js"></script>

<!-- Importe la source permettant de créer les menus -->
<script src="Creation Menus.js"></script>

<script>
// Fonction appelée lors d'un click sur n'importe quel item
function ClickOnItem( indexItem, texteItem )
{
if( texteItem == "none" )
alert( "T'as cliqué sur un séparateur\nPas très malin !!" )
else
alert( "T'as cliqué sur l'item : <" + texteItem + "> d'index " + indexItem )
}

// "evenementSouris" doit être intercepté et passé à la fonction "ShowMenu" (pour Mozilla)
function ChangeAndShowMenu_0( evenementSouris )
{
// Met le menu contextuel voulus
// menuContext.ChangeMenuActif( "0" )

// Affiche le menu
// Ne pas oublier le "return" (ShowMenu retourne toujours false) pour que le menu par défaut ne s'affiche pas
return ShowMenu( evenementSouris )
}

function OnClickOnCheckFor()
{
alert( "Il n'y a rien a trouver\r\nC'est juste un exemple !!" )
}

function OnClickOnContactMe()
{
alert( "Vous pouvez me contacter à l'adresse suivante :\r\nludinski@gmail.com" )
}
</script>
</head>

<body onselectstart="return false" ondragstart="return false" oncontextmenu="return false">
<img style = "position: absolute; left: 1300; top: 1400;" />
<script>
mainMenu.Start()

// Cette méthode doit être appelée en dernier (donc juste avant la balise de fin de script) pour que les menus apparaissent au premier plan
menuContext.Start( false )

GetElement( "CHECKFOR_BUTTON" ).onclick = OnClickOnCheckFor

</script>

</body>
</html>

Commentaire de tito17 le 10/11/2006 18:06:09

Quand à l'encodage il est vrai que cela peut ne pas fonctionner en UTF-8. J'ai déjà eu le problème !!

Commentaire de blolenain le 17/11/2006 09:41:16

moi j'ai un soucis plus compliquer!! car sur une et une seul page, le menu ne veux pas s'afficher sous IE (toutes les autres s'affiche normalement!) et sous firefox np! Ie, seulement sur cette page me la code en UTF-8 et impossible de changer le codage!!!

Commentaire de benjedi le 04/01/2007 16:09:30

Bonjour,

Il est très bien ton menu, juste une petite question ...

Comment peut on faire pour lorsque l'on clique sur un Item, la page s'ouvre vers une frame, car pour le moment la page s'ouvre dans une autre fenêtre.

Merci.

Commentaire de crash03 le 10/02/2007 01:28:04

Salut, j'ai un petit problème, de mon pc le menu marche très bien ( IE, FireFox) mais des que je met ma page sur mon espace perso, il ne s'affiche plus rien !!! es-ce que quelqu'un pourrait m'aider??

Commentaire de LUDINSKI le 10/02/2007 12:35:46

Salut Crash03,

Aurais-tu une erreur générée ? Si oui, laquelle ?
Sinon, fait attention au codage de la page dans ton "espace perso" !

Commentaire de crash03 le 10/02/2007 14:40:50

il n'y a aucun message d'erreur, la page se lance et rien ne s'affiche !!! sinon je ne sait pas de quoi tu parle pour le codage de mon espace perso pourrait-tu m'expliquer??

Commentaire de merkhaled le 20/02/2007 23:50:01

excellente source, et ca fonctionne a merveille sous IE6 sans aucune erreur.
je met 10/10
remarque : si on utilise les frames, le sous menu ne s'affiche pas, comment faire pour qu'il saffiche en dessus de la frame ?
merci

<FRAMESET cols="180, *" frameborder=0>
  <FRAMESET rows="20, 200" frameborder=0>
      <FRAME src="entete.html">
      <FRAME src="menu.htm" name=menu>
  </FRAMESET>
  <FRAME src="page.html" frameborder=0>
  <NOFRAMES>
  
  </NOFRAMES>
</FRAMESET>

Commentaire de ouibou92 le 10/03/2007 20:56:51

Bonjour!

Ce menu est super!

Je n'ai qu'un problème qui m'empêche de l'utiliser: lien vers une cible (j'utilise les frames).
En HTML, c'est facile c'est traget=""....
Mais en JS???? J'ai cherché je trouve pas...
Help please!

Merci pour ce menu! 10/10

Commentaire de jnff le 12/03/2007 01:34:17

Salut, vraiment bien sympatique comme menu. Je suis débutant dans la vie de webm@ster et j'aurais une quetion à vous poser et une p'tite remarque à faire sur le menu:

   ? Dans la page d'exemple, un clique sur le lien de messagerie entraine l'ouverture d'une fenêtre d'alerte. Mais comment fait-on pour que lors de ce clique cela entraine l'ouverture du logiciel de messagerie de l'utilisateur? Que faut-il mettre après:
function OnClickOnContactMe()
{
alert( "Service bientôt disponible." )
}

qui est dans le fichier html ou alors faut-il modifier quelque chose dans le fichier Création Menus?



   ! Lorsque la page est trop grande par rapport à la taille de l'écran de l'utilisateur et qu'il a un défilement verticale, le menu se décale vers le haut mais les zones de "cliquage" des différentes lignes du menu ne changent pas de place par rapport à sa positon lorsque la page est en haut. Comment peut-on fixer le menu verticalement malgré que l'on fasse défilé la page vers le bas? !


Voila ci quelqu'un peu m'aider, merci d'avance @ tous.
Cordialement.                                           j-n

Commentaire de clemtomo le 20/03/2007 08:57:21

Bonjour à tous,
Il est très bien programmé ce menu, par contre il n'est pas évident de mettre en place la feuille de style de CSS pour afficher ce que l'on veut au centre de la page... Existe-t-il des sites ou l'on puisse voir simplement comment le mettre en place ?
Merci d'avance : ) Bonne journée !

Commentaire de jnff le 20/03/2007 13:15:23

Hello clemtomo, jutilise actuellement sur mon site perso ce menu. http://lpamgenieelectri.olympe-network.com/


par contre toujours pas de réponses pour mon post du 12/03/2007. Toujours personne?

Commentaire de ouibou92 le 14/04/2007 13:27:07

Bonjour!

Ce menu est super!

Je n'ai qu'un problème qui m'empêche de l'utiliser: lien vers une cible (j'utilise les frames).
En HTML, c'est facile c'est traget=""....
Mais en JS???? J'ai cherché je trouve pas...
Help please!

Merci pour ce menu! 10/10

Commentaire de LUDINSKI le 14/04/2007 15:29:56

Salut et désolé pour ce long silence...

Ouibou92, je pense que GetElement( "nomDeTaFame" ).src = "..."
devrait faire l'affaire !

JNFF, pour afficher la boîte de dialogue permettant d'envoyer un mail, après avoir créé ton item, tu ajoutes
tonItem.SetURL( "mailto:adresse1@domain.fr;adresse2@domain.fr" )

Commentaire de jnff le 27/04/2007 01:19:25

Merci beaucoup LUDINSKI

Commentaire de bundy318 le 08/05/2007 17:36:49

Salut,

Ton menu a l'air vraiment bien, dommage que tu n'a pas developpé une interface pour le rendre dynamique (créer le menu à partir d'un fichier xml)

a+

Commentaire de abdou_al2007 le 17/08/2007 09:34:09

Bonjour,

J'ai essayer le menu et il est trés bien j'ai un soucis, je n'utilise pas les frame et je veux le positionner dans une cellule d'un tableau, comment puis je faire?

merci d'avance

Commentaire de mikeyftp le 14/09/2007 02:21:47

Bonsoir, je voudrais utiliser ton menu, je le trouve super mais je n'arrive pas à faire ouvrir un des liens dans un cadre particulier de la page. Je débute, si tu pouvais m'aider...
Merci d'avance.

Commentaire de givit le 14/10/2007 10:26:03 1/10

Salut LUDINSKI,

Il avait l'air cool ce menu mais apparment, il est très compliqué à le faire fonctionner correctement...

Sur son ordinateur, pas de problème, mais télécharger le tel quel, sans rien modifier du code, il ne fonctionne plus. Même en utilisant le code de TITO17 (voir plus haut) cela ne fonctionne toujours pas.

C'est bizard tout ça...

Commentaire de elodie07 le 13/11/2007 17:47:25

bonjour,
merci pour ce menu ; j'ai un peu patoger pour le parametrer, mais j'ai finalement réussi à avoir quelque chose de pas trop mal (http://perso.orange.fr/gs-anne.cartier/TEST)

ma question est la suivante : je n'utilise pas de frame, mais je souhaiterai que les liens vers d'autres site (voir en bas du menu (ZELIUS)) ou d'autres site puissent s'ouvrir dans une nouvelle page ou onglet... est-ce possible, si oui comment ?

le site est en phase de test, mais ça avance pas mal...

A bientôt de vous lire
Elodie

Commentaire de lucas33 le 29/12/2007 20:16:11 10/10

Ce menu est excellent. Il marche parfaitement bien !!
Pour les personnes dont le menu ne s'affiche pas, c'est peut-être à cause du nom de la page "Création_Menus.js" qui comporte un accent, essayez sans accent ("Creation_Menus.js").
Sinon j'ai une question, comment peut-on faire pour que le menu apparaisse que lorsque l'on passe sur une morceau du menu. Voir l'exemple de ce site : http://www.toulouse-renaissance.net/c_outils/c_menu_glide.htm. Merci de répondre !!!
A bientôt !!
Lucas

Commentaire de LUDINSKI le 02/01/2008 23:42:10

Salut Lucas33,

Il est tout à fait envisageable de faire en sorte que le menu se cache comme dans le lien ci-dessus...

Mais bien sûr il faut l'emplémenter entièrement. Si tu as assez de courage pour t'y atteler... Pour ma part je ne pense pas m'y mettre; par manque de temps.

Commentaire de elodie07 le 03/01/2008 10:34:10 8/10

Salut tout le monde,
Ludinski, merci mille fois pour ce menu qui m'a permis de mettre mon site en ligne plus rapidement que prévu à l'adresse suivante : http://perso.orange.fr/gs.anne-cartier/
J'ai de très bon echos de mes visiteurs !!
en revanche, (le post précédent est resté sans réponse :-{) les gens me demande comme je m'y attendais s'il était possible que les liens externes s'ouvrent dans une nouvelle fenêtre ou un nouvel onglet...
voici le code correspondant à  la ligne qui nous interesse :

var itemMainMenu9 = mainMenu.Add( "Images/picto-zelius.png", " Programmes Officiels", "ItemSimple", "ItemSimpleOnFocus" )
itemMainMenu9.SetURL( "http://www.zelius.com/p_detail_contenu.asp?gnrId=1452" )

c'est précisément cette URL que je voudrais ouvrir dans une fenetre ou onglet à part.
Est-ce possible ? si oui, que dois(je rajouter comme code et où le placer ?

d'avance merci encore pour tout et meilleurs voeux à tous pour cette année 2008 !!

Commentaire de LUDINSKI le 03/01/2008 14:45:36

Salut Elodie et BONNE ANNEE A TOUS !!

En effet, "c'y poussible"... Pour cela il faut que tu remplaces
itemMainMenu9.SetURL( "http://www..." )
par
itemMainMenu9.SetFunction( "OpenInNewPage( 'http://www...' )" )

et bien sûr, que tu ajoutes cette fonction dans la balise <script> de ta page :
function OpenInNewPage( url )
{
    open( url, 'new' )
}

Voilà, n'hésites pas si tu as d'autres questions
Et félicitations pour ton site ;)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu vertical deroulant [ par dante20007 ] bonjour je viens de voir sur ce site comment faire un menu vertical deroulant:http://css.alsacreations.com/Construction-de-m menu dynamique horizontal [ par jousay ] Bonjour,J'aimerais créer un menu dynamique horizontal qui fonctionnerait comme le menu windows (file, edit, view,...); c'est à dire comme le menu de p CSS et Hover [ par pitchoune ] Bonjour, Soit le tableau suivant dans une page HTML :   &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"&gt;   Menu deroulant vertical [ par leo7511 ] Bjr,J'espère être sur le bon thème.J'ai essayé le menu déroulant vertical en copiant le code sur le bloc note pour avoir le fichier "Menu.js" et ajout demande d'aide sur menu dynamique vertical [ par christmac ] Voila je doit inclure pour un site un petit menu dynamique avec des sous menu en dessous, jusque la j'ai trouver plein de modele qui me va. Mais ou ce Menu déroulant CSS + Javascript : problème de comptabilité avec IE6 [ par Crabinette ] Bonjour à tous!J'ai récemment créé une ébauche de mon site internet en language HTML / CSS et j'ai voulu lui ajouter un menu déroulant horizontal simp Menu vertical + tchat [ par tibob135 ] Bonjour, je ne sais pas mais jaimerais savoir ou avoir un tchat ajax :)aussi jaimerais savoir comment faire ce menu vertical...merci(de ce site)http:/ Problème d'affichage de menu css et javascript (IE vs Firefox) [ par _celine_ ] Bonjour, J'ai un menu, fais avec une feuille css. et un script javascript pour montrer ou cacher le sous-menu (un des nombreux exemples que l'on trou Problème de css [ par ripcurlteam ] Bonjour &#224; tous et &#224; toutes ! Tout d'abord JOYEUX NO&#203;L !!!! J'ai fait un un menu d&#233;roulant dans mon site et j'ai encore un petit pr menu déroulant vertical [ par rduvrac ] J'ai r&#233;cup&#233;r&#233; ce script mais il ne fonctionne pas. J'aimerai bien car il est simple &#224; mettre en place et &#224; actualiser sinon.


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Waterfall in Kauai Hawaii With Rainbow
Photo bora-bora 

Visiter la photothèque
 
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 : 7,160 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)