CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 11 20 12:45:55

[OPEN XML] LES SPéCIFICATIONS D'OPEN XML ISO ENFIN PUBLIéES ! par neodante

SAF 2008 : DAY I par MPOWARE

PASS 2008 : RéSUMé DE LA PREMIèRE JOURNéE par christian

WINDOWS AZURE SERVICES : PREMIèRE APPLICATION - SERVICE ON THE CLOUD : JUST DO IT ! par redo

SQL SERVER KILIMANJARO : DATA-TIER APPLICATION COMPONENT - DAC par christian

RE : SELECTION DANS UN TABLEAU par Bul3

RE : SELECTION DANS UN TABLEAU par saltwater08

RE : SELECTION DANS UN TABLEAU par Bul3

RE : INCOMPATIBILITé IE6/IE7 CLIC DROIT AFFICHAGE MENU PERSONNALISé par Bul3

INCOMPATIBILITé IE6/IE7 CLIC DROIT AFFICHAGE MENU PERSONNALISé par matiassa

+ de logiciels à télécharger

1 291 743 membres
239 nouveaux aujourd'hui
14 519 membres club

Trouver une ressource

Trouvez une ressource parmi 39 004 codes, 1 202 892 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

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

Information sur la source

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é: 22 089 / 4 933

Auteur : LUDINSKI

Ecrire un message privé

Note :

7,25 / 10

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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

DHTML Menus
- Images
  - CheckFor.gif 990 octets
  - Dossier.gif 890 octets
  - File.gif 888 octets
  - Flêche verte focus.gif 847 octets
  - Flêche verte.gif 847 octets
  - Google.gif 1 096 octets
  - HelpMedium.gif 1 209 octets
  - InformationMedium.gif 1 201 octets
  - Javascript.gif 987 octets
  - SendMailMedium.gif 1 190 octets
  - Séparateur vert.gif 891 octets
  - Thumbs.db97 792 octets
- Menus
  - Items.js 5 487 octets
  - MainMenu.js 4 151 octets
  - MenuContext.js 3 269 octets
  - Menus.js 13 720 octets
- Création Menus.js 2 134 octets
- Exemple.htm 1 934 octets
- Styles.css 2 744 octets
- Utilisation des Menus.doc73 728 octets

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

FONCTION PERMETTANT D'INDIQUER À UN ÉLÉMENT QU'IL PEUT ÊTRE ...

UN TOOL TIP (BULLE D'AIDE) COMPATIBLE IE ET MOZILLA, MODIFIA...

UNE TREEVIEW GÉNÉRÉE DYNAMIQUEMENT, UTILISANT LES STYLES CSS...

MENU CONTEXTUEL EN CASCADE GÉNÉRÉ DYNAMIQUEMENT, UTILISANT L...

Toutes les sources de LUDINSKI

Sources de la même categorie

MENU DYNAMIQUE CSS À 100% par Arto_8000

MENU DEROULANT SPÉCIAL par neacko_80

MENU EN CASCADE par kazma

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE par mehdikobra

MENU GLISSANT par kazma

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

MENU DÉROULANT (JE SAIS.... ENCORE...) EN JAVASCRIPT & CSS. par inami

MENU MULTI-NIVEAUX HORIZONTAL/VERTICAL par bultez

MENU VERTICALE DYNAMIQUE par haryou

MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIAB... par Marmotte86

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>

<link rel="stylesheet" type="text/css" href="Styles.css" />


<script src="Menus/MenuContext.js"></script>
<script src="Menus/MainMenu.js"></script>
<script src="Menus/Menus.js"></script>
<script src="Menus/Items.js"></script>


<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

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 : <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 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 à tous et à toutes ! Tout d'abord JOYEUX NOËL !!!! J'ai fait un un menu déroulant dans mon site et j'ai encore un petit pr menu déroulant vertical [ par rduvrac ] J'ai récupéré ce script mais il ne fonctionne pas. J'aimerai bien car il est simple à mettre en place et à actualiser sinon.