Menu déroulant sur un site

Utilisateur anonyme -  
 peppena -
Salut !
qq1 saurait (surement) comment je peux faire pour réaliser des menus "déroulants" sur un site (genre je clique sur un mot ou une image, et ça me fait apparaître un menu en dessous).
Merci @+

4 réponses

  1. peppena
     
    si tu veux voila un code
    il faut bien sur revoir les liens
    tu copies tout ce qui suis dans un fichier menu.js
    et ds le pge html
    voila l'appel au menu :
    <SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
    <SCRIPT LANGUAGE=JavaScript>
    if(document.getElementById)
    document.write('<DIV class=popper id=topdeck ></DIV>');
    </SCRIPT>

    code script:
    posYmenu = 10; // position du menu
    bgcolor='#6699CC';//couleur du menu
    bgcolor2='#B0C4DE';// couleur on mouse over
    needcenter =true;
    if(!needcenter)
    posXmenu = 0;
    else
    { if (document.all)
    posXmenu = (document.body.clientWidth/2)-(800/2);
    else
    posXmenu = (window.innerWidth/2)-(800/2);
    }
    document.write('<style type="text/css">');
    document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
    document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')
    document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
    document.write('A:active.ejsmenu {text-decoration:none; color:"#ffd700";}')
    document.write('A.ejsmenu {color:#FFFFFF; text-decoration:none;}')
    document.write('</style>')
    document.write('<DIV class=popper id=topdeck></DIV>');

    /*
    LIENS
    */
    zlien = new Array;
    zlien[0] = new Array;
    zlien[1] = new Array;
    zlien[2] = new Array;
    zlien[3] = new Array;
    zlien[4] = new Array;
    zlien[5] = new Array;
    zlien[6] = new Array;
    zlien[7] = new Array;
    zlien[0][0] = '<A HREF="" target="principal" CLASS=ejsmenu></A>';
    zlien[0][1] = '<A HREF="personnel.htm" target="principal" CLASS=ejsmenu>Personnel</A>';
    zlien[0][2] = '<A HREF="activites.htm" target="principal" CLASS=ejsmenu>Activités</A>';

    var nava = (document.layers);
    var dom = (document.getElementById);
    var iex = (document.all);
    if (nava) { skn = document.topdeck }
    else if (dom) { skn = document.getElementById("topdeck").style }
    else if (iex) { skn = topdeck.style }
    skn.top = posYmenu+24;

    function pop(msg,pos)
    {
    skn.visibility = "hidden";
    a=true
    skn.left = posXmenu+pos;
    var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='white' WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
    pass = 0
    while (pass < msg.length)
    {
    content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=16><FONT SIZE=2 FACE=\"Arial\">  "+msg[pass]+"</FONT></TD></TR>";
    pass++;
    }
    content += "</TABLE></TD></TR></TABLE>";
    if (nava)
    {
    skn.document.write(content);
    skn.document.close();
    skn.visibility = "visible";
    }
    else if (dom)
    {
    document.getElementById("topdeck").innerHTML = content;
    skn.visibility = "visible";
    }
    else if (iex)
    {
    document.all("topdeck").innerHTML = content;
    skn.visibility = "visible";
    }
    }
    function kill()
    {
    skn.visibility = "hidden";
    }
    document.onclick = kill;
    document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=white WIDTH=800><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% whidth=25><TR>')

    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[0],0)" href="presentation.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>Présentation</b></FONT></a></TD>')
    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[1],100)" href="samu.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>SAMU</b></FONT></a></TD>')
    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[2],200)" href="smur.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>SMUR</b></FONT></a></TD>')
    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[3],300)" href="transport.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>Transport sanitaire</b></FONT></a></TD>')
    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],400)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[4],400)" href="enseignement.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>Enseignement</b></FONT></a></TD>')
    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],500)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[5],500)" href="aidemedicale.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>Aide médicale urgente</b></FONT></a></TD>')

    document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[7],700)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(true)" onMouseOver="pop(zlien[7],700)" href="liens.htm" target="principal" CLASS=ejsmenu><FONT SIZE=2 FACE="Arial"><b>liens</b></FONT></a></TD>')
    document.write('</TR></TABLE></TD></TR></TABLE></DIV>')
    1
  2. arthix Messages postés 53 Statut Membre 5
     
    Salut,

    DHTML, encore et toujours .... sera ta solution... sous google tu fais rechercher script dhtml, et là paf, plein de solutions !!!

    A+
    0