OnMouseOut liste déroulante

badziz Messages postés 62 Date d'inscription jeudi 11 mai 2006 Statut Membre Dernière intervention 28 juin 2011 - 8 avril 2008 à 09:46
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 8 avril 2008 à 12:55
Salut!
j'ai fait une barre de navigation horizontale avec liste déroulante verticale comme ici
Par contre le problème c'est que lorsque le curseur quitte la liste des sous catégories, les sous-catégories restent affichées... Est il possible de faire un onMouseOut et faire en sorte que le sous-menu s'efface?

6 réponses

nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
8 avril 2008 à 09:59
Salut,

peus tu nous préciser ce que sont tes sous menu, es ce des divs ???

Si t'a besoin d'aide, MP !!!
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 10:04
Bonjour,
>>lorsque le curseur quitte la liste des sous catégories, les sous-catégories restent affichées
    ben non...  ni avec K-Meleon, ni avec IE(7)... ????
    tu utilises quel navigateur ?  
>>de faire un onMouseOut
    euh... pas regarder l'exemple, mais à mon huble avsi, tout est fait en CSS,
       pourquoi vouloir ajouter du javascript ? ( inutile )

<hr />                Cordialement            Bul        
0
badziz Messages postés 62 Date d'inscription jeudi 11 mai 2006 Statut Membre Dernière intervention 28 juin 2011 1
8 avril 2008 à 10:26
Sur le tutoriel oui il n'y a pas de problèmes les sous-menus s'effacent automatiquement mais dans ma création non. Je ne vois pas trop pourquoi. Voila une portion du code HTML:
<td colspan="2">
        
                [index.php ]

    </td>
        
       <td colspan="6">
                   
             *                 : 
           
           
           
                
                    <li>Actus de la semaine</li>
                    <li>Actus mois précédent</li>
                

           
       

    </td>

Pas de changements particulier par rapport au tuto.
Pour le javascript, c'est identique. Et pour le CSS, voila mon code:

dl, dt, dd, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#menu {
    position: absolute;
    width: 829px;
    vertical-align: top;
    float: left;
}

#menu dl 
{
    float: left;
    margin: 0 0;
    margin-bottom: 26px;
}

#menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    border: 0px solid gray;
    display: inherit; 
}

#menu dd {
    border: 1px solid gray;
}

#menu li {
    text-align: center;
    background: #fff;
}

#menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0;
    display: block;
}

#menu li a:hover, #menu dt a:hover {
    background: #eee;
}


Je vois rien de spécial...
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 10:44
Bonjour,

>>Pas de changements particulier par rapport au tuto.
    particulier, certes... mais il y en a ! puisque le tuto fonctione et pas ce que tu fais
>>Pour le javascript, c'est identique.
    ah... y'a du javascript quand même ?
    pas sûr que cela soit nécessaire !
>>Je vois rien de spécial...
    et pourtant, çà ne fonctionne pas....
    revérifie méticuleusement.

    tiens en voici un autre....sans js.
    à toit d'adapter à ce que tu veux.

<!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>[# Niveau 1]
     
        <li>[# Niveau 1.1]</li>
        <li>[# Niveau 1.2]</li>
        <li>[# Niveau 1.3]</li>
     
    </li>
    <li>[# Niveau 2]
     
        <li>[# Niveau 2.1]</li>
        <li>[# Niveau 2.2]</li>
        <li>[# Niveau 2.3]</li>
     
    </li>
 

</html>

<hr />                Cordialement            Bul        
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
badziz Messages postés 62 Date d'inscription jeudi 11 mai 2006 Statut Membre Dernière intervention 28 juin 2011 1
8 avril 2008 à 11:44
Chez moi ca fonctionne, c'est surement le fait que je n'ai fournit qu'une partie du html...
pour le javascript oui regarde sur le lien, il y en a:

window.onload=montre;
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';}
}

Je vais tester ce que tu m'as donné merci ;-)
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 12:55
>>

Chez moi ca fonctionne
    ???   je ne comprend plus ? ça fonctionne ou pas ?
    et si tu peux éviter le javascript.... n'hésite pas !
    certains refusent d'utiliser le javascript ( et plus nombreux que ceux qui
       utilisent un navigateur alternatif que je ne citerais pas... par exemple ! )
<hr />                Cordialement            Bul        
0