begin process at 2010 02 10 14:39:32
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Menu javascript à gauche


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Menu javascript à gauche

jeudi 24 avril 2008 à 09:46:43 | Menu javascript à gauche

hotmaskim


Bonjour,

 J'ai généré un menu sur www.editeurjavascript.com  (ce menu exactement)

Le problème, les sous-menu (lorsque l'on passe sur la barre) sont toujours situés sur la gauche de la barre...

N'étant pas trés fort en javascript, je vous pose donc la question.



 Je vous donne mon code :

/*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
http://www.editeurjavascript.com
*/

bgcolor='#CCFFFF';
bgcolor2='#CCCC66';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
document.write('#topgauche { position:absolute;  z-index:10; }')
document.write('A:hover.ejsmenu {color:#330066; text-decoration:none;}')
document.write('A.ejsmenu {color:#330066; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position: relative; height: 0px"> <div class="popper" id="topdeck"></div></div>');

zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[4] = new Array;
zlien[1][0] = '<A HREF="../nas/consultation/fichehistorique" CLASS=ejsmenu TARGET="">Fiche NAS/Historique</A>';
zlien[1][1] = '<A HREF="../nas/consultation/recapitulatif" CLASS=ejsmenu TARGET="">Recapitulatif</A>';
zlien[2][0] = '<A HREF="../nas/parametrage/etablissement" CLASS=ejsmenu TARGET="">Etablissement</A>';
zlien[2][1] = '<A HREF="../nas/parametrage/affectation" CLASS=ejsmenu TARGET="">Affectation</A>';
zlien[2][2] = '<A HREF="../nas/parametrage/typeetablissement" CLASS=ejsmenu TARGET="">Type Etablissement</A>';
zlien[2][3] = '<A HREF="../nas/parametrage/specialite" CLASS=ejsmenu TARGET="">Specialite</A>';
zlien[2][4] = '<A HREF="../nas/parametrage/sectionenseignement" CLASS=ejsmenu TARGET="">Section Enseignement</A>';
zlien[2][5] = '<A HREF="../nas/parametrage/regimeeleve" CLASS=ejsmenu TARGET="">Regime des eleves</A>';
zlien[2][6] = '<A HREF="../nas/parametrage/baremeeleve" CLASS=ejsmenu TARGET="">Bareme Eleves</A>';
zlien[2][7] = '<A HREF="../nas/parametrage/baremepoint" CLASS=ejsmenu TARGET="">Bareme Points</A>';
zlien[2][8] = '<A HREF="../nas/parametrage/utilisateur" CLASS=ejsmenu TARGET="">Utilisateur</A>';
zlien[2][9] = '<A HREF="../nas/parametrage/nouvelleannee" CLASS=ejsmenu TARGET="">Nouvelle Annee</A>';
zlien[3][0] = '<A HREF="../nas/importation/formationeleve" CLASS=ejsmenu TARGET="">Formation d\'eleve</A>';
zlien[3][1] = '<A HREF="../nas/importation/etablissement" CLASS=ejsmenu TARGET="">Etablissement</A>';
zlien[3][2] = '<A HREF="../nas/importation/specialite" CLASS=ejsmenu TARGET="">Specialite</A>';
var nava = (document.layers);
var iex = (document.all);
var dom = (document.getElementById);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = 24;

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.left = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 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=20><FONT SIZE=1 FACE=\"Arial\">&nbsp;&nbsp;"+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=0><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=100%><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>')
document.write('<TD WIDTH=300 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=../nas/default/accueil CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Accueil</FONT></a></TD>')
document.write('<TD WIDTH=300 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[1],100)" href=../nas/default/accueil CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Consultation et Exportation</FONT></a></TD>')
document.write('<TD WIDTH=300 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[2],200)" href="" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Donnees et parametrage</FONT></a></TD>')
document.write('<TD WIDTH=300 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[3],300)" href="" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Importation</FONT></a></TD>')
document.write('<TD WIDTH=300 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=../nas/default/deconnexion CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Deconnexion</FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE></DIV></div>')



Merci pour votre futur aide .
jeudi 24 avril 2008 à 10:30:06 | Re : Menu javascript à gauche

bultez

Membre Club
Réponse acceptée !


Bonjour,

    sans vouloir critiquer ce que tu nous donnes,
       un menu comme celui-là c'est du html+du css.... rien de plus.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
    <style type="text/css">
        ul.menu        {    list-style-type: none;
                                 margin : 0;
                                 padding: 0;    }
        ul.menu li     {    float: left;
                                 margin: 0;
                                 border: 0;    }   
        ul.menu ul     {    position: absolute;
                                 display: none;
                                  list-style-type: none;
                                  margin: 0;
                                  padding: 0;
                                  border: solid 1px black;    }
        ul.menu ul li    
                        {    float: none;
                              padding: 0;    }
        ul.menu li a:link, ul.menu li a:visited
                        {    display: block;
                              color: #800000;
                              background: #FFFFAA;
                              margin: 0;
                              padding: 4px 4px;
                              text-decoration: none;    }
        ul.menu li a:hover
                        {    background: #AAAAFF;    }
        ul.menu li:hover > ul
                        {    display: block;    }
    </style>
</head>
<body>
  <ul class="menu"
        style="position:absolute;top:50px;left:40px;width:60%">
    <li><a href="#">Un</a>
      <ul>
        <li><a href="#">Niveau 1.1</a></li>
        <li><a href="#">Niveau 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Deux</a>
      <ul>
        <li><a href="#">Niveau 2.1</a></li>
        <li><a href="#">Niveau 2.2</a></li>
        <li><a href="#">Niveau 2.3</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

à toi d'y mettre les liens que tu désires et de fignoler la présentation.


                Cordialement            Bul         [mon Site]     [M'écrire]
jeudi 24 avril 2008 à 15:41:03 | Re : Menu javascript à gauche

hotmaskim

J'avais déjà tester un menu en html mais le problème c'est que je me retrouvais avec toutes les puces !
Ca fonctionnait, mais bon c'était trés moche ....
jeudi 24 avril 2008 à 16:26:25 | Re : Menu javascript à gauche

bultez

Membre Club
et tu as testé celui là ?   y'a pas d'puces ici !

                Cordialement            Bul         [mon Site]     [M'écrire]
vendredi 25 avril 2008 à 08:07:54 | Re : Menu javascript à gauche

hotmaskim

Je viens de le tester et ça fonctionne parfaitement !!!

Plus simple que celui d'avant en plus .

Je te remercie de ton aide !!
vendredi 25 avril 2008 à 09:07:51 | Re : Menu javascript à gauche

hotmaskim

Comment je peux faire pour agrandir les cases ?
et est-ce que c'est possible de séparer les menu pas des lignes ?
Je suis pas doué en css alors là ....

Parce qu'en fait, le menu est en haut de la page. Faut que je le centre et le mieux serai qu'on puisse différencier les différents menu parce que là, ils sont tout sérré ... :D

Pourrais-tu m'aider encore un peu ? ^^
vendredi 25 avril 2008 à 09:30:27 | Re : Menu javascript à gauche

bultez

Membre Club

>> Comment je peux faire pour agrandir les cases ?
>>et est-ce que c'est possible de séparer les menu pas des lignes ?
    oui... tout est en css, alors on y fait ce qu'on veut

>>Je suis pas doué en css alors là ....
    moi non plus ! très loin de là !
    mais pour ce que tu demandes, width, padding, margin, border....
          que des choses basiques : quelques explications sur selfHtml

                Cordialement            Bul         [mon Site]     [M'écrire]
vendredi 25 avril 2008 à 09:35:21 | Re : Menu javascript à gauche

hotmaskim

Je vais regarder ça ^^

Merci de ta réponse .


Cette discussion est classée dans : document, write, zlien, skn, visibility


Répondre à ce message

Sujets en rapport avec ce message

menu dynamique (suite) [ par mamy ] Voilà mon code mais il ne fonctionne pas: Bienven bug affichage <div> ????? [ par benj18 ] Bonjour,J'ai un problème d'affichage avec mon menu dynamique (code en dessous).Quand le menu se déroule sur une balise ou , ce sont ces balises qui " Menu avec affichage du sous-menu au survol [ par lotte3 ] Bonjour à tousJe suis nouvelle sur ce forum de Javascript, et je débute dans ce langage, dans ne m'en veuillez pas si je pose des questions trop simpl Sous-menu dans les sous-menu [ par sarrjean ] Bonjour tout le monde, Je m'y connais pas tellement en javascript, mais j'avais besoin d'un menu pour mon site. J'ai trouvé une bonne source pour un menu_script [ par sam_12_3 ] salut tout le monde, voila j'ai un gros problemes je ne comprend pas du tout un script  que j' ai pris sur internet qui permet de crer un menu dynami menu dynamique [ par ffnmanche ] Bonjour,Je souhaiterais ajouter des sous menus à mon menu dynamique mais je n'y arrive pas, est ce que vous pouvez m'aider. MerciLes sous menus seraie probleme de lien sur menu [ par kythibong ] bonjourj'ai un petit soucij'utilise pour la premiere fois du javascript dans un site pour créer un menu déroulant avec sous menusqui comportent tous d Petite question que mon menu... [ par twinsen60 ] Bonjourje posséde un menu pour un site, il fonctionne, mais j'aimerai quand je passe sur le bouton "accueil", je n'ai pas de sous menu, avec "accueil" menu déroulant [ par otacon85 ] bonjourpetit probléme de menu deroulantbgcolor='#FFCC99';bgcolor2='#FFFFCC';document.write Menu déroulant [ par flopad ] Bonjour, j'utilise ce script pour afficher un menu qui se déroule sur la droite lors du passage de la souris, je voudrais que la couler de droite soit


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

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,186 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales