Probleme avec menu déroulant comme indiqué dans le tuto

[D.Deschamps]

Voila, j'ai souhaité faire un menu déroulant comme indiqué ici: https://forum.forumactif.com/t314485-installation-d-un-menu-deroulant

Alors, j'ai tout choisis pour avoir un menu horizontal avec une apparition des sous menu au survol. Sauf que quand je pose ma souris sur la case, rien n'apparait ! Ou se trouve mon erreur ?

Voici mon code:

Code:

      <style>        /*liste des menus*/
        #menu ul{padding: 0px;
            list-style-type: none;
        margin: 0px;
        }
       
        /*positionnement des menus*/
        #menu dl {
            float: left;
            width: 150px;}
       
        /*menus*/
        #menu dt {
            color: blue;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            background: #ccc;
            border: 1px solid black;
            margin: 0px;}
       
        /*menus au survol*/
        #menu dt:hover{
            border-bottom: none!important;}
       
        /*liste des sous-menus*/
        #menu dd {
            display: none;
            border: 1px solid gray;
            border-top: none!important;
            background: #ccc;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
       
        #menu li {
            text-align: center;
            background: grey;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
       
        /* liens des sous-menus*/
        #menu li a, #menu dt a {
            color: black;
            background: #ccc;
            text-decoration: none;
            display: block;
            height: 100%;
            border: 0 none;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}
       
        /*liens des sous-menus au survol*/
        #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
            color: white;
            text-align: center;
            width: 150px;
            cursor: pointer;
            font-weight: bold;
            background: gray;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}</style>


     <script>        $(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });</script>
      
      
      <div id="menu">
        <dl>
        <dt>Replier</dt>
        </dl>
       
        <dl>
        <dt>Menu 1</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 1.2</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 1.3</a></li>
        </ul>
        </dd> 
        </dl>
       
        <dl>
        <dt>Menu 2</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.4</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.5</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.6</a></li>
        </ul>
        </dd>
        </dl>
       
        <dl>
        <dt>Menu 3</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 3.2</a></li>
        </ul>
        </dd> 
        </dl>
        </div>

Merci d'avance
D.Deschamps

[Kaktus]

Bonsoir,
Je pense qu'il est préférable de ne pas tout mélanger sur la même page si c'est bien posté sur votre forum. Donc, peut être faudrait-il simplement mettre les codes aux endroits indiqué sur le tutoriel ?

Kaktus.

[D.Deschamps]

Mais si je veux le mettre aussi dans une page html, ca marchera pas.

[Kaktus]

Donc, vous souhaitez le mettre dans une page HTML alors ?

[D.Deschamps]

oui voila

[Kaktus]

Donc le mieux serait de mettre dans une structure type d'une page HTML, je dirais. Comme ceci:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page HTML</title>
    <script type="text/javascript">
SCRPT JS
        </script>
    <style type="text/css">
CSS
        </style>
</head>
<body>
 HTML
</body>
</html>

[D.Deschamps]

ca marche toujours pas

y'a encore le même problème.

[Kaktus]

Oh, peut-être n'avez vous pas importé la bibliothèque jQuery ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page HTML</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
SCRPT JS
        </script>
    <style type="text/css">
CSS
        </style>
</head>
<body>
 HTML
</body>
</html>

[D.Deschamps]

toujours pas

[Kaktus]

Chez moi cela marche parfaitement !

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page HTML</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });
        </script>
    <style type="text/css">
/*liste des menus*/
#menu ul{padding: 0px;
    list-style-type: none;
margin: 0px;
}
 
/*positionnement des menus*/
#menu dl {
    float: left;
    width: 150px;}
 
/*menus*/
#menu dt {
    color: blue;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    background: #ccc;
    border: 1px solid black;
    margin: 0px;}
 
/*menus au survol*/
#menu dt:hover{
    border-bottom: none!important;}
 
/*liste des sous-menus*/
#menu dd {
    display: none;
    border: 1px solid gray;
    border-top: none!important;
    background: #ccc;
    margin: 0px;
    padding: 0px;
    list-style-type: none;}
 
#menu li {
    text-align: center;
    background: grey;
    margin: 0px;
    padding: 0px;
    list-style-type: none;}
 
/* liens des sous-menus*/
#menu li a, #menu dt a {
    color: black;
    background: #ccc;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;}
 
/*liens des sous-menus au survol*/
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    color: white;
    text-align: center;
    width: 150px;
    cursor: pointer;
    font-weight: bold;
    background: gray;
    margin: 0px;
    padding: 0px;
    list-style-type: none;}
        </style>
</head>
<body>
      <div id="menu">
        <dl>
        <dt>Replier</dt>
        </dl>
     
        <dl>
        <dt>Menu 1</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 1.2</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 1.3</a></li>
        </ul>
        </dd>
        </dl>
     
        <dl>
        <dt>Menu 2</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.4</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.5</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 2.6</a></li>
        </ul>
        </dd>
        </dl>
     
        <dl>
        <dt>Menu 3</dt>
        <dd  style="display:none;">
        <ul>
        <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
        <li><a href="url-de-renvoi">Sous-Menu 3.2</a></li>
        </ul>
        </dd>
        </dl>
        </div>
</body>
</html>

[D.Deschamps]

Ah oui, maintenant ca marche aussi chez moi

merci beaucoup.

Par contre, ca ne marche pas avec I-E

[Kaktus]

Pas de problèmes !
Oh, IE est une source de problème pour les codeurs. Je ne sais pas si vous avez la toute dernière version... Ne possédant pas IE c'est tout bonnement impossible pour moi d'essayer des choses donc à vous de voir si vous souhaitez laisser ce problème ouvert pour trouver une solution sur IE !

Kaktus.

[D.Deschamps]

d'accord, je vais attendre pour voir si quelqu'un a la solution pour I-E

Sinon, merci beaucoup pour tout le reste

[D.Deschamps]

Personne sais pour I-E ?

[D.Deschamps]

Sinon, serais-ce possible de faire en sorte que les sous menu ne s'affiche pas en se déroulant du haut vers le bas, mais directement.

Vous voyez ce que je veux dire ?