begin process at 2012 02 14 08:11:25
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DYNAMIQUE VERTICAL PARAMÉTRABLE

MENU DYNAMIQUE VERTICAL PARAMÉTRABLE


 Information sur la source

Note :
8 / 10 - par 8 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Initié Date de création :26/06/2005 Date de mise à jour :26/06/2005 23:48:17 Vu :39 134
Auteur : Phil_Free

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

 Description

Cliquez pour voir la capture en taille normale
Ce Menu Dynamique Vertical est paramétrable selon vos besoins et vos gouts.

- Couleur et police du texte,
- Couleur et taille des cellules,
- Position du menu,
etc. (18 paramètres à votre disposition)

Le menu fait surtout appel aux feuilles de style CSS.
Il est bien sûr possible de l'améliorer et de le complèter grâce à CSS.

Source

  • <html>
  • <head>
  • <title>Menu vertical parametrable</title>
  • <script type="text/javascript">
  • window.onload = affiche;
  • // ----- Fonction d'affichage des menus -----
  • function affiche (id) {
  • var d = document.getElementById(id);
  • var nbelmenu = 4 // nombre d'éléments dans le menu
  • for ( var i = 1 ; i <= nbelmenu ; i++ ) {
  • if ( document.getElementById('sousmenu'+i) ) {
  • document.getElementById('sousmenu'+i).style.display='none';
  • }
  • }
  • if (d) {
  • d.style.display='block';
  • }
  • }
  • </script>
  • </head>
  • <body>
  • <script type="text/javascript">
  • var fontfamil = "arial, sans-serif" ; // choix de la police de caractères du menu
  • var tailleftmen = "90%" ; // taille de la police du menu
  • var fontcolo = "#FFFFDD" ; // couleur de la police de caractères du menu
  • var cellbckgrnd = "#999966" ; // couleur des cellules du menu
  • var positionver = 1 ; // position verticale du menu dans la page
  • var positionhor = 1 ; // position horizontale du menu dans la page
  • var largeurcell = 8 ; // largeur des cellules du menu
  • var hauteurcell = 18 ; // hauteur des cellules du menu
  • var espacemcell = 6 ; // espace entre les cellules du menu
  • var subfontfamil = "arial, sans-serif" ; // choix de la police de caractères des sous-menus
  • var subtailleftmen = "80%" ; // taille de la police des sous-menus
  • var subfontcolo = "#000000" ; // couleur de la police de caractères des sous-menus
  • var subftsucolo = "#FFCC00" ; // couleur de la police de sous-menus survolés
  • var subcellbckgrnd = "#999966" ; // couleur des cellules des sous-menus
  • var submovcellmenu = "absolute" ; // "absolute"=sans déplacement des cellules menu ("relative" = avec déplacement)
  • var subcellposhor = 3 ; // position horizontale des cellules des sous-menus
  • var sublargeurcell = 6 ; // largeur des cellules des sous-menus
  • var subhauteurcell = 15 ; // hauteur des cellules des sous-menus
  • // creation des styles CSS du menu --->
  • document.write( "<style type='text/css'>" );
  • document.write( "#menuvert {position: relative;top: " + positionver + "em;" );
  • document.write( "left: " + positionhor + "em;" );
  • document.write( "width: " + largeurcell + "em;}" ) ;
  • document.write( "#menuvert dt {font-family: " + fontfamil + ";" ) ;
  • document.write( "font-size: " + tailleftmen + ";color: " + fontcolo + ";" );
  • document.write( "text-align: center;background: " + cellbckgrnd + ";" );
  • document.write( "cursor: hand;height: " + hauteurcell )
  • document.write( "px;margin: " + espacemcell + "px;list-style-type: none;}" );
  • document.write( "#menuvert dd {background: " + subcellbckgrnd + ";" );
  • document.write( "position: absolute;left: " + subcellposhor + "em;" );
  • document.write( "margin-top: -1em;width: " + sublargeurcell + "em;}" );
  • document.write( "#menuvert li {font-family: " + fontfamil + ";" );
  • document.write( "font-size: " + subtailleftmen + ";list-style-type: none;" );
  • document.write( "height: " + subhauteurcell + "px;}" );
  • document.write( "#menuvert li a, #menuvert dt a {color: " + subfontcolo + ";" );
  • document.write( "text-decoration: none;}" );
  • document.write( "#menuvert li a:hover {color: " + subftsucolo + ";" );
  • document.write( "text-decoration: none;}" );
  • document.write( "}</style>" );
  • // FIN des styles CSS
  • </script>
  • </head>
  • <body>
  • <dl id="menuvert">
  • <dt onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">Menu 1<!--remplacer Menu 1 par le texte du menu--></dt>
  • <dd id="sousmenu1" onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">
  • <ul>
  • <li><a href="menu11.htm"><!--remplacer menu11.htm par le lien du menu-->Menu 1.1<!--remplacer Menu 1.1 par le texte du menu--></a></li>
  • </ul>
  • </dd>
  • <dt onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">Menu 2</dt>
  • <dd id="sousmenu2" onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
  • <ul>
  • <li><a href="menu21.htm">Menu 2.1</a></li>
  • <li><a href="menu22.htm">Menu 2.2</a></li>
  • </ul>
  • </dd>
  • <dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">Menu 3</dt>
  • <dd id="sousmenu3" onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">
  • <ul>
  • <li><a href="menu31.htm">Menu 3.1</a></li>
  • <li><a href="menu32.htm">Menu 3.2</a></li>
  • <li><a href="menu33.htm">Menu 3.3</a></li>
  • </ul>
  • </dd>
  • <dt onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">Menu 4</dt>
  • <dd id="sousmenu4" onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">
  • <ul>
  • <li><a href="menu41.htm">Menu 4.1</a></li>
  • <li><a href="menu42.htm">Menu 4.2</a></li>
  • <li><a href="menu43.htm">Menu 4.3</a></li>
  • <li><a href="menu44.htm">Menu 4.4</a></li>
  • </ul>
  • </dd>
  • </dl>
  • </body>
  • </html>
<html>
<head>
<title>Menu vertical parametrable</title>
<script type="text/javascript">

window.onload = affiche;

// ----- Fonction d'affichage des menus -----

function affiche (id) {

var d = document.getElementById(id);

var nbelmenu = 4		// nombre d'éléments dans le menu

for ( var i = 1 ; i <= nbelmenu ; i++ ) {
	if ( document.getElementById('sousmenu'+i) ) {
		document.getElementById('sousmenu'+i).style.display='none';
	}
}
if (d) {
	d.style.display='block';
}
}

</script>

</head>
<body>
<script type="text/javascript">

var fontfamil   = "arial, sans-serif" ;	// choix de la police de caractères du menu
var tailleftmen = "90%" ;				// taille de la police du menu
var fontcolo    = "#FFFFDD" ;			// couleur de la police de caractères du menu
var cellbckgrnd = "#999966" ;			// couleur des cellules du menu
var positionver = 1 ;					// position verticale du menu dans la page
var positionhor = 1 ;					// position horizontale du menu dans la page
var largeurcell = 8 ;					// largeur des cellules du menu
var hauteurcell = 18 ;					// hauteur des cellules du menu
var espacemcell = 6 ;					// espace entre les cellules du menu
var subfontfamil   = "arial, sans-serif" ;	// choix de la police de caractères des sous-menus
var subtailleftmen = "80%" ;				// taille de la police des sous-menus
var subfontcolo    = "#000000" ;			// couleur de la police de caractères des sous-menus
var subftsucolo    = "#FFCC00" ;			// couleur de la police de sous-menus survolés
var subcellbckgrnd = "#999966" ;			// couleur des cellules des sous-menus
var submovcellmenu = "absolute" ;			// "absolute"=sans déplacement des cellules menu ("relative" = avec déplacement)
var subcellposhor  = 3 ;					// position horizontale des cellules des sous-menus
var sublargeurcell = 6 ;					// largeur des cellules des sous-menus
var subhauteurcell = 15 ;					// hauteur des cellules des sous-menus

// creation des styles CSS du menu --->
document.write( "<style type='text/css'>" );

document.write( "#menuvert {position: relative;top: " + positionver + "em;" );
	document.write( "left: " + positionhor + "em;" );
	document.write( "width: " + largeurcell + "em;}" ) ;

document.write( "#menuvert dt {font-family: " + fontfamil + ";" ) ;
	document.write( "font-size: " + tailleftmen + ";color: " + fontcolo + ";" );
	document.write( "text-align: center;background: " + cellbckgrnd + ";" );
	document.write( "cursor: hand;height: " + hauteurcell )
	document.write( "px;margin: " + espacemcell + "px;list-style-type: none;}" );

document.write( "#menuvert dd {background: " + subcellbckgrnd + ";" );
	document.write( "position: absolute;left: " + subcellposhor + "em;" );
	document.write( "margin-top: -1em;width: " + sublargeurcell + "em;}" );

document.write( "#menuvert li {font-family: " + fontfamil + ";" );
	document.write( "font-size: " + subtailleftmen + ";list-style-type: none;" );
	document.write( "height: " + subhauteurcell + "px;}" );

document.write( "#menuvert li a, #menuvert dt a {color: " + subfontcolo + ";" );
	document.write( "text-decoration: none;}" );

document.write( "#menuvert li a:hover {color: " + subftsucolo + ";" );
	document.write( "text-decoration: none;}" );

document.write( "}</style>" );
// FIN des styles CSS

</script>

</head>
<body>
<dl id="menuvert">
	<dt onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">Menu 1<!--remplacer Menu 1 par le texte du menu--></dt>
		<dd id="sousmenu1" onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu11.htm"><!--remplacer menu11.htm par le lien du menu-->Menu 1.1<!--remplacer Menu 1.1 par le texte du menu--></a></li>
			</ul>
		</dd>
         
	<dt onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">Menu 2</dt>
		<dd id="sousmenu2" onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu21.htm">Menu 2.1</a></li>
				<li><a href="menu22.htm">Menu 2.2</a></li>
			</ul>
		</dd>

	<dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">Menu 3</dt>
		<dd id="sousmenu3" onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu31.htm">Menu 3.1</a></li>
				<li><a href="menu32.htm">Menu 3.2</a></li>
				<li><a href="menu33.htm">Menu 3.3</a></li>
			</ul>
		</dd>

	<dt onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">Menu 4</dt>
		<dd id="sousmenu4" onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">
			<ul>
				<li><a href="menu41.htm">Menu 4.1</a></li>
				<li><a href="menu42.htm">Menu 4.2</a></li>
				<li><a href="menu43.htm">Menu 4.3</a></li>
				<li><a href="menu44.htm">Menu 4.4</a></li>
			</ul>
		</dd>

</dl>
</body>
</html>

 Conclusion

- La source étant largement documentée, il n'est pas nécessaire en principe d'y adjoindre une explication de fonctionnement.

- Testé sous IE et Firefox.


 Historique

26 juin 2005 23:48:17 :
Erreur sur l'un des commentaires.

 Sources du même auteur

Source avec une capture VÉRIFICATION D'UN FORMULAIRE EN TEMPS RÉEL
UNE PETITE IMAGE VAUT MIEUX QU'UN LONG DISCOUR
Toutes les sources de Phil_Free

 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 la_pin le 27/06/2005 15:52:27

Super sympa, ressemble un peu dans la confection au iubito menu (http://iubito.free.fr/).
Ce menu est très bien fait mais pas super original, il faudrait que tu travailles un peu plus le graphisme pour te démarquer un peu des autres scripts de menu qui font légion sur le site !

= total 7/10

Commentaire de Phil_Free le 27/06/2005 19:46:41

Salut La_PIN,

Merci du commentaire.

Le but recherché n'est pas vraiment l'esthétique. C'est plutôt une incitation à utiliser le CSS et d'offrir beaucoup de paramètres (facilement modifiables) afin de pouvoir insérer le menu dans toutes sortes d'environnement et ce très rapidement.

Si je poste une étape suivante, ce sera de mettre tout le menu sous forme d'une fonction.
C'est sympa de pouvoir ajouter un menu qui ne prend que 2 lignes dans la source HTML, du style:

<script type="text/javascript" src="répertoire/menuvert.js"></script>
...
<script type="text/javascript"> menuvert() </script>

Commentaire de Romain128 le 28/06/2005 20:15:14

En plus, il s'affichera correctement sous Linx et pour les personnes qui ne veulent/peuvent avoir du JS! :-)
=>8/10<=

Commentaire de Arto_8000 le 29/06/2005 03:36:01

Phil_Free -> un script parait mieux si il est beau esthétiquement, alors c'est peut-être pas nécessaire ,mais c'est plus intéressant tester un script avec un bel apparance qu'un script laid. Aussi si on veut intégrer ton script dans une page et qu'il faut retravailler le graphisme c'est pas super.

Commentaire de coucou747 le 29/06/2005 09:24:30 administrateur CS

c'est lynx, pas linx... (navigater en mode console qui existe sous linux)

Commentaire de Phil_Free le 29/06/2005 20:54:36

Salut Arto_8000,

Je n'ai pas dit que le résultat était laid,tous les goûts sont dans la nature.

L'avantage de ce script est de t'offrir 18 paramètres, couleurs, polices, etc.
Donc chacun y trouvera son bonheur.
Je ne suis pas graphiste, les couleurs que j'ai choisies ne sont là qu'à titre d'exemple. (j'aurais pu prendre une police blanche sur un fond blanc ;) )

Commentaire de Phil_Free le 29/06/2005 21:02:05

Merci du commentaire Romain128,

C'est l'un de mes buts avec ce menu et mes scripts en général, la compatibilité avec un maximum de navigateurs sur un maximum de plateformes.

Si vous utilisez des navigateurs "exotiques", je suis intéressé par le résultat et les critiques.

Commentaire de leboncyr le 05/07/2005 01:27:25

Bonjour, Voila, j'ai installer ce menu sur mon site qui est en NPDS..j'ai directement mis le code dans mon bloc de gauche avec mes parametres et ca fonctionne correctement..le problème survient lorsque je met un deuxieme menu dans un autre bloc de gauche par exemple ou si je le met dans le bloc de droite.
Du coup les deux menu restent ouverts et n'ont plus d'interet de menu deroulant puisqu'il ne se déroulent plus ;-)..;quelqu'un pourrait il m'aider SVP Merci

Commentaire de leboncyr le 05/07/2005 01:36:07

Mon code dans le premier bloc de gauche :
<head>
<title>Menu vertical parametrable</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body text="#000000" link="#0000FF" vlink="#FF00FF" alink="#FF0033"><div Align="center">
<div align="left">
  <script type="text/javascript">
window.onload = affiche;
// ----- Fonction d'affichage des menus -----
function affiche (id) {
var d = document.getElementById(id);
  
var nbelmenu = 9        // nombre d'éléments dans le menu
  
for ( var i = 1 ; i <= nbelmenu ; i++ ) {
    if ( document.getElementById('sousmenu'+i) ) {
        document.getElementById('sousmenu'+i).style.display='none';
    }
}
if (d) {
    d.style.display='block';
}
}
</script></head>
  <body>
  <script type="text/javascript">
var fontfamil = "Balloon, sans-serif" ;    // choix de la police de caractères du menu
var tailleftmen = "200%" ;                // taille de la police du menu
var fontcolo = "#FFFFFF" ;            // couleur de la police de caractères du menu
var cellbckgrnd = "#ABCDEF" ;            // couleur des cellules du menu
var positionver = 2 ;                    // position verticale du menu dans la page
var positionhor = 0 ;                    // position horizontale du menu dans la page
var largeurcell = 14 ;                    // largeur des cellules du menu
var hauteurcell = 18 ;                    // hauteur des cellules du menu
var espacemcell = 14 ;                    // espace entre les cellules du menu
var subfontfamil = "Balloon, sans-serif" ;    // choix de la police de caractères des sous-menus
var subtailleftmen = "200%" ;                // taille de la police des sous-menus
var subfontcolo = "#FFFFFF" ;            // couleur de la police de caractères des sous-menus
var subftsucolo = "#FF0000" ;            // couleur de la police de sous-menus survolés
var subcellbckgrnd = "#ABCDEF" ;            // couleur des cellules des sous-menus
var submovcellmenu = "absolute" ;            // "absolute"=sans déplacement des cellules menu ("relative" = avec déplacement)
var subcellposhor = 0 ;                    // position horizontale des cellules des sous-menus
var sublargeurcell?? = 10 ;                    // largeur des cellules des sous-menus
var subhauteurcell = 30 ;                    // hauteur des cellules des sous-menus
  
// creation des styles CSS du menu --->
document.write( "<style type='text/css'>" );
document.write( "#menuvert {position: relative;top: " + positionver + "em;" );
    document.write( "left: " + positionhor + "em;" );
    document.write( "width: " + largeurcell + "em;}" ) ;
  
document.write( "#menuvert dt {font-family: " + fontfamil + ";" ) ;
    document.write( "font-size: " + tailleftmen + ";color: " + fontcolo + ";" );
    document.write( "text-align: center;background: " + cellbckgrnd + ";" );
    document.write( "cursor: hand;height: " + hauteurcell )
    document.write( "px;margin: " + espacemcell + "px;list-style-type: none;}" );
document.write( "#menuvert dd {background: " + subcellbckgrnd + ";" );
    document.write( "position: absolute;left: " + subcellposhor + "em;" );
    document.write( "margin-top: -1em;width: " + sublargeurcell + "em;}" );
document.write( "#menuvert li {font-family: " + fontfamil + ";" );
    document.write( "font-size: " + subtailleftmen + ";list-style-type: none;" );
    document.write( "height: " + subhauteurcell + "px;}" );
document.write( "#menuvert li a, #menuvert dt a {color: " + subfontcolo + ";" );
    document.write( "text-decoration: none;}" );
document.write( "#menuvert li a:hover {color: " + subftsucolo + ";" );
    document.write( "text-decoration: none;}" );
document.write( "}</style>" );
// FIN des styles CSS
</script></head>
  <body>
  <dl id="menuvert">
    <dt onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">Menu</dt>
    <dd id="sousmenu1" onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">
      <ul>
        <li> <a href=http://www.monsite/static.php?op=Services.php&npds=1">Services</a><br>
          <br>
        </li>
        <li> <a href="http://www.monsite/static.php?op=Avantages.php&npds=1">Avantages</a><br>
          <br>
        </li>
        <li> <a href="http://www.monsite/.static.php?op=Tarifs.php&npds=1">Tarifs</a><br>
          <br>
        </li>
        <li> <a href="http://www.monsite/modules.php?ModPath=contact&ModStart=contact">Contact</a><br>
          <br>
        </li>
        <br>
        <br></li>
        
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
      <br>
      Vous</dt>
    <dd id="sousmenu2" onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/submit.php">Soumettre Article</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/friend.php">Faire ma Pube</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/reviews.php">Une Critique..?</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/user.php">Votre Compte</a><br>
          <br>
        </li>
        <li><a href="function#userblock">Votre Compte</a><br>
          <br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">
      <br>
      Infos</dt>
    <dd id="sousmenu3" onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="function#oldNews
params#">Ancien Article</a><br>
          <br>
        </li>
        <li><a href="function#lnlbox">Lettre d'information</a><br>
          <br>
        </li>
        <li><a href="function#bigstory">Article du jour</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/sections.php">Spéciale<br>
          <br>
          </a></li>
        <li><a href="http://www.monsite/forum.php">Forum</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/faq.php">FAQ</a><br>
          <br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">
      <br>
      En Bref</dt>
    <dd id="sousmenu4" onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/sdv.php?sdv=Demo">Petites Annonces</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/topics.php">Sujets Actifs</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/newtopic.php">Les News</a><br>
          <br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu5');" onmouseout="javascript:affi??che();">
      <br>
      Utilitaires</dt>
    <dd id="sousmenu5" onmouseover="javascript:affiche('sousmenu5');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/static.php?op=Program.php&npds=1">Logiciels</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Liens.php&npds=1">Partenaires</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Liens.php&npds=1">Liens
          Utiles</a><br>
          <br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu6');" onmouseout="javascript:affiche();">
      <br>
      Pratique</dt>
    <dd id="sousmenu6" onmouseover="javascript:affiche('sousmenu6');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/static.php?op=FAI/FAI_Cadre_Centre.htm">Comparatif
          FAI Adsl</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Constructeurs/Constructeurs_Cadre_Centre.htm">Adresse
          Constructeurs</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static/glossextensions_v2536.pdf">Glossaire
          Extentions</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static/glosstermes_v818.pdf">Glossaire
          Thermes</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=popup.htm">Clic droit
          Utile</a><br>
          <br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu7');" onmouseout="javascript:affiche();">
      <br>
      Astuces Windows</dt>
    <dd id="sousmenu7" onmouseover="javascript:affiche('sousmenu7');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/static.php?op=Win95_98/windows9x_centrale.htm">Win
          95/98</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=WinXp/Index_Astuces_WinXp_Centre.htm">Win
          XP<br>
          </a><br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Office/office_centrale.htm">Office</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Virus/Index_Virus.htm">Virus</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=depannage/depannage_centrale.htm">Au
          secour..!</a><br>
          <br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=search2.html">Recherche
          Astuces</a><br>
          <br>
          <br>
        </li>
        <li><a href="function#searchbox">Recherche Article</a><br>
          <br>
          <br>
        </li>
      </ul>
    </dd>
    <dt onmouseover="javascript:affiche('sousmenu8');" onmouseout="javascript:affiche();">
      <br>
      Divers</dt>
    <dd id="sousmenu8" onmouseover="javascript:affiche('sousmenu8');" onmouseout="javascript:affiche();">
      <ul>
        <li><a href="http://www.monsite/static.php?op=WebCam.php">Ma WebCam</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=model_camera_tours.htm">WebCam
          TOURS</a><br>
          <br>
        </li>
        <li><a href="http://www.3etoiles.net/module-tv.html">Télé & Radio</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=Virus/Index_Virus.htm&npds=1">Virus</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=depannage/depannage_centrale.htm">Au
          secour..!</a><br>
          <br>
        </li>
        <li><a href="http://www.monsite/static.php?op=search2.html">Recherche
          Astuces</a><br>
          <br>
        </li>
      </ul>
     </dd>
  </dl>
</div>
<div align="center">1 </div>
</body>
</html>

Commentaire de zolof le 07/07/2005 14:39:47

Merci pour ce menu vertical.. que j'ai mis dans une page inc.php afin de le mettre dans une cellule et ça fonctionne super sur pc..
Mais sur mac os.. Le sous-menu se décale tout en bas et la couleur de fond déborde..
Zoloff

Commentaire de Phil_Free le 17/07/2005 20:39:51

Salut LEBONCYR,

J'ai jeté un coup d'oeil à ta source, elle est pleine de bugs ici:

// creation des styles CSS du menu --->

Il manque des ; et des } entre autres.

J'espère que ça t'aide.

Commentaire de Phil_Free le 17/07/2005 20:55:32

Salut Zoloff,

Sur quelle version MacOs as-tu un problème ?

Commentaire de leboncyr le 20/07/2005 21:54:19

Merci Phil_Free pour ta réponse, mais du coup, vu que je n'avais pas la soluce, j'ai créer mon menu en flash...et n'en suis pas plus mecontent, donc merci encore pour ta réponse...

Commentaire de metalcat le 04/08/2005 13:29:44

Bonjour Phil_Free,
J'ai 2 petites critiques sur ton code.
1. Dans le cas où j'utilise le menu en menu fixe (scrolling), le menu disparaît quand je pointe ma souris sur le dernier sous-menu ??? J'ai malgré tout trouvé une astuce pour éviter cela en créant un dernier sous-menu fictif et transparent. Là, j'ai plus de problème.
2. Quand j'appelle ma page HTML, les sous-menus apparaissent une fraction de seconde au chargement de la page.
Voilà, en tout cas un grand merci car à mon niveau je ne suis pas encore capable de le faire.
Salutations
metalcat  

Commentaire de Phil_Free le 08/08/2005 18:41:26

Salut Metalcat,

Concernant ton point 1.
Travailles-tu sous Mac ou Windows ?
IE ou Firefox ?

Concernant le point 2.
Je n'ai rien remarqué de tel sous IE et Firefox depuis une plateforme Windows.

Je me demande si tu n'as pas modifié qqchose que tu n'aurais pas dû.
Si ta page contenant le menu est sur le Net, indique moi l'URL je regarderai ce qui ne va pas.

Commentaire de sparklegamer le 16/01/2006 17:47:39

excellent script vérifié avec Firefox sur un serveur de Free, bravo !

Commentaire de emi1885 le 18/08/2006 01:13:36

J'ai utilisé ton script pour un site que je suis en train de créer.
Il est très bon je trouve.
Et très simple à utiliser.
Surtout avec les commentaires.
bravo à toi !

Commentaire de djassib le 08/03/2007 12:00:37

J'ai trouvé ton travail magnifique et super. Tu es efficace. Je l'utilise et ça marche très bien

Commentaire de symmm31 le 03/04/2007 14:05:12

super ! merci bien cela m'a été d'une aide précieuse !!!

Commentaire de metalcat le 06/05/2007 12:50:44

Bonjour Phil_Free,
J'utilise ton script et ça fonctionne bien. Je voudrais maintenent l'utiliser pour un second menu vertical dans la même page HTML. Est-ce possible ? J'ai bien essayé en scindant la constante (paramètre) en 2 passée à l'appel de la fonction par ex. comme ceci :
pour le 1er menu vertical ==> affiche ('sousmenu','1')...
et pour le 2ème menu vertical ==> affiche ('sous-menu','1')...
Ensuite, j'ai adapté la fonction comme ceci :

function affiche (nsmenu,no) {
var id=String(nsmenu)+ String(no);  
var d = document.getElementById(id);
  
var nbelmenu = 4 ;       // nombre d'éléments dans le menu
  
for ( var i = 1 ; i <= nbelmenu ; i++ ) {

    if ( document.getElementById(nsmenu+i) ) {
        document.getElementById(nsmenu+i).style.display='none';
    }
}
if (d) {
    d.style.display='block';
}
}

C'est le onmouseout="javascript:affiche();" qui ne marche plus. Et cela pour aucun des 2 menus verticaux. As-tu une explication ?

Excuse-moi de ne pas avoir répondu à ton message plus haut. J'avais complètement oublié ma question mais le problème est toujours d'actualité. Tu peux visualiser cela sur mon site :
http://homeusers.brutele.be/metalcat dans la rubrique "LES TRAVAUX". Ton menu vertical se trouve à chaque x sur la droite de l'écran (parfois en bleu, parfois en rouge).

metalcat

Commentaire de gen76 le 09/06/2007 00:02:36

merci pour le script ! ;
je suis bleu (newbie) : jai mis le script dans le cadre de gauche (frame) mais une partie reste caché dessous le cadre de droite !
comment faire ? et encore merci

Commentaire de jpv424 le 21/08/2007 13:48:24

Salut, je l'ai installé et tout marche avec IE et Firefox... Très modifiable aucun soucis.

J'ai juste un problème : Quand je vais sur ma page, mes 2 menus sont déjà ouvert et il faut que je passe la souris dessus pour qu'il disparaissent... pas cool. J'ai ce problème sur firefox et sur ie.

help plz

Commentaire de jackh82 le 06/02/2009 07:55:03

Comment ajouter des niveaux dans l'arborescence du menu. Ici il y a deux niveaux. Merci de donner un exemple. Merci d'avance. J'ai essayé mais le réultat n'est pas super. Les autres niveaux s'ouvrent en même temps que le niveau 2.
Jack

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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 : 1,248 sec (4)

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)