PB menu dynamique - affichage pas terrible [Résolu]

Signaler
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,

J'ai placé un menu sur un site que je suis en train de faire, il s'agit d'un menu horizontal dynamique.
Voici le code html de ce dernier :

            * : Accueil
   

   
               
        * : Mairie
           
               
                 <li>Présentation</li>
                 <li>Municipalité</li>
                 <li>Infos Pratiques</li>
                 <li>Comptes rendus</li>
                 <li>Bulletin Municipal</li>
                 <li>Actualités</li>
               
           
   

   
   
       
        * : Education et culture
           
               
                 <li>Scolarité</li>
                 <li>Garderie périscolaire</li>
                 <li>Cantine</li>
                 <li>Bibliothèque</li>
                 <li>Centre aéré</li>
               
           
   

   
       
        * Menu 3
            :

               
                    <li>Sous-Menu 3.1</li>
                    <li>Sous-Menu 3.2</li>
                    <li>Sous-Menu 3.3</li>
                    <li>Sous-Menu 3.4</li>
                    <li>Sous-Menu 3.5</li>
               
           
   

  

   

et le CSS :

dl, dt {
margin: 0;
padding: 0;
list-style-type: none;
}
dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color:#235bbc;
}
#menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    padding:0px 0px 0px 15px; /*espacement entre les éléments du menu */
    margin: 0px 5px 0px 0px;
    color: #FFFFFF;
    font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size:10px;
    text-decoration:none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url(images-menu/item-primary-bg.gif);
    background-repeat: repeat-x;
}
#menu dl {
float: left;
width: 12em;
margin: 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
    background-color: #999999;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

#item-primary a:hover{
color: #8bb5ee;
background: url();
background-repeat: no-repeat;
background-position: center;
}

Le problème qui survient est que le menu est déployé sans même que je clique sur un des boutons, ce qui n'est pas très esthétique, de plus, il doit y avoir un problème de z-index mais que je ne comprend pas car le menu passe sous les autres éléments de décors du site et ce, malgré un z-index100.

Enfin, bon, j'aimerai comprendre ce qui ne vas pas avec le code de mon menu.

Merci d'avance pour votre aide.

10 réponses

Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Sinon, j'ai fais cette manip et elle fonctionne :

        <dt onmouseover="javascript:montre('smenu3');">Divers</dt>
            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
               
                    <li>[{PATH}{LIEN_ITEM4} Economie]</li>
                    <li>[{PATH}{LIEN_ITEM5} Associations]</li>
                    <li>[{PATH}{LIEN_ITEM6} Tourisme]</li>        
                    <li>[{PATH}{LIEN_ITEM7} Infos pratiques]</li>        
                    <li>[{PATH}{LIEN_ITEM8} Contact]</li>
                    <li>[{PATH}{LIEN_ITEM9} Liens amis]</li> 
                    <li>[{PATH}{LIEN_ITEM10} Plan du site]</li> 
                    <li>[{PATH}{LIEN_ITEM11} Situation géographique]</li> 
                    <li>[{PATH}{LIEN_ITEM12} Agenda]</li> 
                    <li>[{PATH}{LIEN_ITEM25} Urbanisme]</li>
               
            </dd>
    </dl>

Ca a suffit à régler le problème.
Merci de t'être penché sur le problème.
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Finalement, j'ai trouvé pour le second problème, j'ai mis un z-index négatif dans une autre partie du css, c'est un peu compliqué à expliqué mais c'est réglé.
J'ai oublié de mettre le js correspondant au menu :

<!-- Menu de navigation

function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->

// Fonction Javascript qui affiche une MsgBox de confirmation
function confirmLink(theLink, confirmMsg)
{

    var is_confirmed = confirm(confirmMsg);
    if (is_confirmed) {
        theLink.href += '&confirme=1';
    }

    return is_confirmed;
}

function confirmLink2(form, confirmMsg, lienForm, aucunMsg){
    len = document.forms[form].elements.length;
    var i=0;
    var j=0;
    document.forms[form].action = lienForm;
    while(i!=len)
    {
        if (document.forms[form].elements[i].type=='checkbox')
            if(document.forms[form].elements[i].name!="")
                if(document.forms[form].elements[i].checked == true){
                    confirmMsg += document.forms[form].elements[i+1].value+", ";
                    j++;
                }
            i++;
    }
    confirmMsg += " ?";
    if (j!=0){
        var is_confirmed = confirm(confirmMsg);
        if (is_confirmed) {
            document.forms[form].submit();
        }

    } else {
        alert(aucunMsg);
        return false;
    }
}

function confirmLink3(form, confirmMsg, lienForm){
    document.forms[form].action = lienForm;
    var is_confirmed = confirm(confirmMsg);
    if (is_confirmed) {
        document.forms[form].submit();
    }else
        return false;

}
function popup_centrer(page,largeur,hauteur,options, parametres) {
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
  window.open(page+parametres,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+",directories=0,menubar=1,menu=1,status=1,location=1,scrollbars=0,resizable=0,fullscreen=0,"+options);
}

// pour gestion menu sous ie6
function hover(obj)
{
     ul = obj.getElementsByTagName('ul');
     if(ul.length > 0)
     {
          style = ul[0].style;          if(style.display '' || style.display 'none')
          {
               style.display = 'block';
          }
          else
          {
               style.display = 'none';
          }
     }
}
function setHover()
{
     if(/MSIE/.test(navigator.userAgent))
     {
          li = document.getElementById('menu').getElementsByTagName('li');

          for(var i=0; i < li.length; i++)
          {
               li[i].onmouseover = function(){hover(this)};
               li[i].onmouseout = function(){hover(this)};
          }
     }
}
// FIN pour gestion menu sous ie6
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, z-index
négatif</td>
</td></tr></tbody></table>pas top
pourquoi ne pas remonter les autres plutôt ?

Nota :
mets ta réponse
en Réponse acceptée ! si tel est le cas ...

;O)
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

C'est ce que j'ai fais, j'ai essayé de remonter les autres mais aparemment, ça réagit assez mal sous IE (encore lui), alors pour remédier à celà, j'ai crée 2 CSS, un pour IE et un autre pour FF, et un script qui détecte quel navigateur est utilisé par l'internaute et de basculer automatiquement sur l'un des 2 CSS, donc le problème est résolu.
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Finalement, j'ai quand même un problème avec mon menu, il reste affiché, même quand on met le curseur de la souris ailleurs.

Le code complet de mon menu est téléchargeable ici
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Ayant un grand besoin d'aide, voilà ce que j'ai fait jusqu'à présent :
http://www.le-pechereau-mairie.fr/maison.php
login : mairie
mdp : devpechereau
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
tu écris
window.onload=montre;
mais la fonction
montre n'est pas définie dans ton fichier
;O)
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Et je défini ça comment ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
...voici la fonction que j'ai trouvé en
tappant window.onload=montre dans la barre de recherche...
function montre(id) {
  var d =
document.getElementById(id);
  for (var i = 1; i<=10; i++) {
    if
(document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
  }
  if (d)
{d.style.display='block';}
}
;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
c'est me semble t-il la bonne façon de l'utiliser...

;O)