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

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par D.Deschamps Dim 22 Avr 2012 - 20:13

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


Dernière édition par D.Deschamps le Lun 23 Avr 2012 - 20:14, édité 1 fois
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Dim 22 Avr 2012 - 20:36

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 ? Wink

Kaktus.
Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Dim 22 Avr 2012 - 22:47

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

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Dim 22 Avr 2012 - 22:55

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

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Dim 22 Avr 2012 - 23:45

oui voila
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Dim 22 Avr 2012 - 23:53

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>
Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 0:06

ca marche toujours pas Sad

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

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Lun 23 Avr 2012 - 0:26

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

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>


Dernière édition par Kaktus le Lun 23 Avr 2012 - 0:30, édité 1 fois
Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 0:28

toujours pas Sad
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Lun 23 Avr 2012 - 0:35

Chez moi cela marche parfaitement ! Wink

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>
Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 10:00

Ah oui, maintenant ca marche aussi chez moi Smile

merci beaucoup.

Par contre, ca ne marche pas avec I-E Sad
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par Kaktus Lun 23 Avr 2012 - 10:20

Pas de problèmes ! Wink
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.
Kaktus

Kaktus
***

Féminin
Messages : 160
Inscrit(e) le : 12/12/2010

http://capharnaum.forumactif.fr/
Kaktus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 10:56

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

Sinon, merci beaucoup pour tout le reste Smile
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 12:01

Personne sais pour I-E ?
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme avec menu déroulant comme indiqué dans le tuto

Message par D.Deschamps Lun 23 Avr 2012 - 17:15

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 ?
D.Deschamps

D.Deschamps
****

Masculin
Messages : 356
Inscrit(e) le : 26/04/2011

http://ententekillersdevf.forum-actif.net/
D.Deschamps a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum