1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Menu javascript à gauche [Résolu]

Signaler
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
 -
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
 -
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.

<hr size="2" width="100%" />
 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('


');

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] = '[../nas/consultation/fichehistorique Fiche NAS/Historique]';
zlien[1][1] = '[../nas/consultation/recapitulatif Recapitulatif]';
zlien[2][0] = '[../nas/parametrage/etablissement Etablissement]';
zlien[2][1] = '[../nas/parametrage/affectation Affectation]';
zlien[2][2] = '[../nas/parametrage/typeetablissement Type Etablissement]';
zlien[2][3] = '[../nas/parametrage/specialite Specialite]';
zlien[2][4] = '[../nas/parametrage/sectionenseignement Section Enseignement]';
zlien[2][5] = '[../nas/parametrage/regimeeleve Regime des eleves]';
zlien[2][6] = '[../nas/parametrage/baremeeleve Bareme Eleves]';
zlien[2][7] = '[../nas/parametrage/baremepoint Bareme Points]';
zlien[2][8] = '[../nas/parametrage/utilisateur Utilisateur]';
zlien[2][9] = '[../nas/parametrage/nouvelleannee Nouvelle Annee]';
zlien[3][0] = '[../nas/importation/formationeleve Formation d\'eleve]';
zlien[3][1] = '[../nas/importation/etablissement Etablissement]';
zlien[3][2] = '[../nas/importation/specialite Specialite]';
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 WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
    {
    content += "----, &nbsp;&nbsp;\"+msg[pass]+\"</TD>\";
    pass++;
    }
content += "
</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('
<TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25>----
')
document.write(', Accueil</TD>')
document.write('Consultation et Exportation, ')
document.write('Donnees et parametrage, ')
document.write('Importation, ')
document.write('Deconnexion, ')
document.write('
</TD></TR></TABLE>

')

<hr size="2" width="100%" />Merci pour votre futur aide .

7 réponses

Réponse 1 / 7
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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>

 
    <li>[# Un]
     
        <li>[# Niveau 1.1]</li>
        <li>[# Niveau 1.2]</li>
     
    </li>
    <li>[# Deux]
     
        <li>[# Niveau 2.1]</li>
        <li>[# Niveau 2.2]</li>
        <li>[# Niveau 2.3]</li>
     
    </li>
 

</html>

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

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 2 / 7
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
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 ....
Réponse 3 / 7
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
et tu as testé celui là ?   y'a pas d'puces ici !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 4 / 7
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
Je viens de le tester et ça fonctionne parfaitement !!!

Plus simple que celui d'avant en plus .

Je te remercie de ton aide !!
Réponse 5 / 7
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
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 ? ^^
Réponse 6 / 7
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
>>

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
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 7 / 7
Messages postés
5
Date d'inscription
jeudi 10 mai 2007
Statut
Membre
Dernière intervention
1 juin 2010
Je vais regarder ça ^^

Merci de ta réponse .
Répondre Posez votre question