Partage
  • Partager sur Facebook
  • Partager sur Twitter

menu horizental avec sous menu horizental

Sujet résolu
agnaou
    6 avril 2009 à 10:54:43

    bonjours a tous et bon début de semaine :
    aprés plusieurs recherche chez ami google j'ai trouve cette fonction 
    //************ Menu Principal ************//
Color0M  = '#FFFFFF' //Couleur du texte
Color1M  = '#000000' //Couleur Arrière
Color2M  = '#6699CC' //Couleur Arrière Surbrillance
Color3M  = '#FF00FF' //Couleur Bordure ????
PosY     = -20       //Distance entre le haut de l'écran et le menu
LargeurM = 110       //Largeur
HauteurM =  30       //Hauteur
AlignM   = 'center'  //'center','right','left'
FontM    = 'Verdana' //Police
SizeM    =  13       //Taille de la Police
WeightM  = 'bold'    //Epaisseur de la Police
CursorM  = 'default' //Curseur-> default,hand...
menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------//
menu[i++]='HomePage'   ;menu[i++]='#'
menu[i++]='Actualités' ;menu[i++]='http://ActuFr.com'
menu[i++]='JavaScript' ;menu[i++]='http://www.javascriptfr.com'
menu[i++]='CPP'        ;menu[i++]='http://www.cppfrance.com'
//************ Sous-Menus ************//
Color0S  = '#FFFFFF' //Couleur du texte
Color1S  = '#555555' //Couleur Arrière
Color2S  = '#6699FF' //Couleur Arrière Surbrillance
Color3S  = '#FFFF00' //Couleur Bordure
EnLigne  =   0       //1:pour ranger sur une seule ligne  0:en colonne
LargeurS = 150       //Largeur
HauteurS =  20       //Hauteur
AlignS   = 'center'  //'center','right','left'
FontS    = 'Verdana' //Police
SizeS    =  10       //Taille de la Police
WeightS  = 'bold'    //Epaisseur de la Police
FonduS   =   1       //1:Fondu, 0:aucun
CursorS  = 'default' //Curseur-> default,hand...
k=-1; zlien=new Array
i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------//
zlien[k][i++]='MultiDesk';zlien[k][i++]='http://multidesk.pass-x.com/'
i=0; zlien[++k]=new Array  //   Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[k][i++]='...'    ;zlien[k][i++]='http://...'
//zlien[k][i++]='...'    ;zlien[k][i++]='http://...'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code'     ;zlien[k][i++]='http://www.javascriptfr.com/listecodes.aspx'
zlien[k][i++]='Forum'    ;zlien[k][i++]='http://www.javascriptfr.com/forum.v2.aspx'
zlien[k][i++]='Emploi'   ;zlien[k][i++]='http://www.javascriptfr.com/emploi.aspx'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code'     ;zlien[k][i++]='http://www.cppfrance.com/listecodes.aspx'
zlien[k][i++]='Forum'    ;zlien[k][i++]='http://www.cppfrance.com/forum.v2.aspx'
zlien[k][i++]='Emploi'   ;zlien[k][i++]='http://www.cppfrance.com/emploi.aspx'
zlien[k][i++]='Livres'   ;zlien[k][i++]='http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'
//************ Fin des paramètres, Début du programme ************//
document.write('<style>')
document.write('.ejmenu  {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')
function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
  if(obj.filters.blendTrans.status!=1)
  { obj.filters.blendTrans.Apply()
    obj.style.visibility="visible"
    obj.filters.blendTrans.Play()
  }
}
document.onclick     = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll      = function() { dgt.visibility=skn.visibility='hidden' }
function pop(msg,pos)
{ skn.visibility="hidden"
  skn.top=document.body.scrollTop+PosY+HauteurM
  if(!msg.length) return
  if(EnLigne)
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
  } else
  { skn.left=pos-1
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"    
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  }
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  if(document.all && FonduS)  fadeIn(topdeck); else skn.visibility="visible";
}
document.write('<ul style="position:relative"><li style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></li><ul ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<li WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</li>")
document.write('</ul>></ul>')
dgt.top=document.body.scrollTop+PosY
//************ Menu Principal ************//
Color0M  = '#FFFFFF' //Couleur du texte
Color1M  = '#000000' //Couleur Arrière
Color2M  = '#6699CC' //Couleur Arrière Surbrillance
Color3M  = '#FF00FF' //Couleur Bordure ????
PosY     = -20       //Distance entre le haut de l'écran et le menu
LargeurM = 110       //Largeur
HauteurM =  30       //Hauteur
AlignM   = 'center'  //'center','right','left'
FontM    = 'Verdana' //Police
SizeM    =  13       //Taille de la Police
WeightM  = 'bold'    //Epaisseur de la Police
CursorM  = 'default' //Curseur-> default,hand...

menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------//
menu[i++]='HomePage'   ;menu[i++]='#'
menu[i++]='Actualités' ;menu[i++]='http://ActuFr.com'
menu[i++]='JavaScript' ;menu[i++]='http://www.javascriptfr.com'
menu[i++]='CPP'        ;menu[i++]='http://www.cppfrance.com'

//************ Sous-Menus ************//
Color0S  = '#FFFFFF' //Couleur du texte
Color1S  = '#555555' //Couleur Arrière
Color2S  = '#6699FF' //Couleur Arrière Surbrillance
Color3S  = '#FFFF00' //Couleur Bordure
EnLigne  =   0       //1:pour ranger sur une seule ligne  0:en colonne
LargeurS = 150       //Largeur
HauteurS =  20       //Hauteur
AlignS   = 'center'  //'center','right','left'
FontS    = 'Verdana' //Police
SizeS    =  10       //Taille de la Police
WeightS  = 'bold'    //Epaisseur de la Police
FonduS   =   1       //1:Fondu, 0:aucun
CursorS  = 'default' //Curseur-> default,hand...

k=-1; zlien=new Array

i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------//
zlien[k][i++]='MultiDesk';zlien[k][i++]='http://multidesk.pass-x.com/'
i=0; zlien[++k]=new Array  //   Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[k][i++]='...'    ;zlien[k][i++]='http://...'
//zlien[k][i++]='...'    ;zlien[k][i++]='http://...'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code'     ;zlien[k][i++]='http://www.javascriptfr.com/listecodes.aspx'
zlien[k][i++]='Forum'    ;zlien[k][i++]='http://www.javascriptfr.com/forum.v2.aspx'
zlien[k][i++]='Emploi'   ;zlien[k][i++]='http://www.javascriptfr.com/emploi.aspx'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code'     ;zlien[k][i++]='http://www.cppfrance.com/listecodes.aspx'
zlien[k][i++]='Forum'    ;zlien[k][i++]='http://www.cppfrance.com/forum.v2.aspx'
zlien[k][i++]='Emploi'   ;zlien[k][i++]='http://www.cppfrance.com/emploi.aspx'
zlien[k][i++]='Livres'   ;zlien[k][i++]='http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'

//************ Fin des paramètres, Début du programme ************//
document.write('<style>')
document.write('.ejmenu  {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')

function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
  if(obj.filters.blendTrans.status!=1)
  { obj.filters.blendTrans.Apply()
    obj.style.visibility="visible"
    obj.filters.blendTrans.Play()
  }
}

document.onclick     = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll      = function() { dgt.visibility=skn.visibility='hidden' }

function pop(msg,pos)
{ skn.visibility="hidden"
  skn.top=document.body.scrollTop+PosY+HauteurM
  if(!msg.length) return
  if(EnLigne)
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
  } else
  { skn.left=pos-1
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"    
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  }
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  if(document.all && FonduS)  fadeIn(topdeck); else skn.visibility="visible";
}

document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
document.write('</TR></TABLE></DIV>')
dgt.top=document.body.scrollTop+PosY

    le probleme c'est qu'il contient des sous menu vertical
    svp quelqu'un a une aidé pour le corrigé a fin que les sous menu soient horizental
    et merci d'avance pour vous repose
    • Partager sur Facebook
    • Partager sur Twitter
    Golmote
    • Javascript
      6 avril 2009 à 11:39:32

      Sachant que ton code est remarquablement pas très joli...

      Je te propose un truc de ce genre là :

      <head>
<style type="text/css">
/* CSS de base du menu */
/* On enlève aux <ul> les propriétés margin et padding */
#menu ul, #ss_menu ul {
margin:0;
padding:0;
}
/* On met les <li> en inline, et en float left */
#menu li, #ss_menu li {
display:inline;
float:left;
padding:5px 10px;
cursor:pointer;
}
/* On met un clear sur le sous_menu, pour qu'il soit effectivement en-dessous du menu */
#ss_menu {
clear:left;
}

/* Aucun mise en forme particulière (couleurs, etc.) n'a été faite. Libre à toi !  */
</style>
</head>
<body>

<!-- Code HTML du Menu -->
<!-- Div id="menu" -->
<!-- Puis une liste <ul>. Liens optionnels sur les <li> -->
<div id="menu">
<ul>
<li>Menu 1</li>
<li><a href="http://www.google.fr">Menu 2</a></li>
<li>Menu 3</li>
</ul>
</div>

<!-- Div id="ss_menu" -->
<!-- Une liste <ul> pour chaque sous menu existant, avec un id="ss_menuN" (N étant le numéro du menu) -->
<!-- Liens optionnels sur les <li> -->
<div id="ss_menu">
<ul id="ss_menu1" style="display:none;">
<li><a href="http://www.siteduzero.com">Ss_menu 1.1</a></li>
<li>Ss_menu 1.2</li>
</ul>
<ul id="ss_menu3" style="display:none;">
<li>Ss_menu 3.1</li>
<li>Ss_menu 3.2</li>
<li>Ss_menu 3.3</li>
</ul>
</div>
<br style="clear:left;" />

<!-- Script pour le menu -->
<script type="text/javascript">

window.onload = function() { // Au chargement (initialisation)
  li_menu = document.getElementById("menu").getElementsByTagName("li"); // On récupère les <li> du <div id="menu">
  for(var i=0,l=li_menu.length;i<l;i++) { // Pour chaque <li>
    li_menu[i].onmouseover = (function(i) { // Lors du survol
      return function() {
        deroule(i+1); // On lance la fonction deroule() (avec en paramètre le numéro du Menu)
      };
    })(i);
  }
};
function deroule(nb) { // Fonction deroule() (en paramètre le numéro du Menu)
  var ss_menus = document.getElementById("ss_menu").getElementsByTagName("ul"); // On récupère les <ul> du <div id="ss_menu">
  for(var i=0,l=ss_menus.length;i<l;i++) { // On parcourt tous les ss_menus
    ss_menus[i].style.display = "none"; // et on les masque
  }
  if(document.getElementById("ss_menu"+nb)) { // On teste l'existence du ss_menu ciblé
    target = document.getElementById("ss_menu"+nb);
    target.style.display = "block"; // S'il existe on l'affiche.
  }
}

</script>
</body>



      EDIT : Regarde ce que je viens de voir dans ton code :
      EnLigne  =   0       //1:pour ranger sur une seule ligne  0:en colonne


      Et si, à tout hasard, tu essayais de mettre la valeur à 1. Juste pour voir ! ;)
      • Partager sur Facebook
      • Partager sur Twitter
      agnaou
        6 avril 2009 à 13:17:58

        ok merci pour ta reponse
        donc voila svp je veux que tu me corrige mon essai
        voici mon code css
        *{
	margin:0;
	padding:0;
}
#menu{
	width:500px;
	background:#e7474e;
	margin:0 auto;
	height:0px;
	color:#000;
}
.menu{
	float:left;
	width:100px;
	height:30px;
	text-align:center;
}
.menu a{
	display:block;
	height:15px;
	padding-top:2px;
}
.menu a:link, .menu a:visited{
	text-decoration:none; 
	color:#000; font-style:inherit
	font-family:verdana, sans-serif;
	font-size:12px;
	background:#abc url(fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
	background:#abc url(fond.jpg);
	color:#000;
}
.menu a:hover, .menu a:active, .menu a:focus{
	background:#abc url(fond.jpg) 0 -90px;
	color:#000;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
	background:#abc url(fond.jpg);
	color:#000;
}
        et voici mon code html
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Menu horizontal avec onglets</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
</head>

<body>
<div id="menu">
	<div class="menu"><a href="page1.html">Menu 1</a></div>
	<div class="menu"><a href="page2.html">Menu 2</a></div>
	<div class="menu" ><a href="page3.html">Menu 3</a></div>
	<div class="menu"><a href="page4.html">Menu 4</a></div>
	<div class="menu" id="activ"><a href="page5.html">Menu 5</a></div>
</div>
</body>
</html>
        donc tous ce qui il manque c'est des sous menu horizental et une fonction comme le votre pour les afficher en rollover et merci tellement de vous reponse
        • Partager sur Facebook
        • Partager sur Twitter
        Golmote
        • Javascript
          6 avril 2009 à 15:15:51

          ... bah base-toi sur l'exemple que je t'ai donné ! o_O
          • Partager sur Facebook
          • Partager sur Twitter
          agnaou
            6 avril 2009 à 15:33:44

            ok merci c'est grace a toi que mon pro est résolu
            donc merci encore une fois
            • Partager sur Facebook
            • Partager sur Twitter

            menu horizental avec sous menu horizental

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown