Menu Déroulant Portail

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

Résolu Menu Déroulant Portail

Message par Desolation le Lun 5 Mai - 16:33

Bonjour les ami(e)s,

Voila je rencontre actuellement un probleme, je souhaiterais mettre en place un menu déroulant ou l'on clique pour ouvrir le menu et non plus avec le passage de la sourie comme actuellement. Je suis allé sur le topic du menu déroulant et tester la technique seulement cela ne fonctionne pas.

Pour le voir aller ici => www.crazymocs.com

Voici mon JAVA :

Code:
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });

Mon code dans le Overall_header :

Code:
        <!--Menu déroulant-->
<div id="menu">
<FONT size="2pt">
 <dl>
          <dt><span style="color: #F7F7F7;">Partie Publique</spam></dt>
         <dd style="display:none;">
 <ul>      
 <li>
 <a href="http://www.crazymocs.com/t73-qui-sommes-nous"><span style="color: #FF0000;">Crazy Mocs ?</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1263-staff-crazy-mocs"><span style="color: #FF0000;">Staff CM</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f11-presentations-obligatoire-pour-avoir-100-du-forum"><span style="color: #FF0000;">Présentations</spam></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f12-coup-de-coeur">Coup de Coeur</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f6-informations">Informations</a>
 </li>
<li>
 <a href="http://www.crazymocs.com/f15-la-vie-du-forum">Vie du Forum</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f7-expositions-lego">Expositions</a>
 </li>
                   <li><center>-EXPO CM 2014-</center></li>
                        <li>
                          <a href="http://www.crazymocs.com/t2682-expo-les-3-et-4-mai-2014-a-mennecy-91"><span style="color: #C9720E;">Mennecy</spam></a>
 </li>    
 <li>
                          <a href="http://www.crazymocs.com/t2702-exposition-crazy-mocs"><span style="color: #C9720E;">SaintLager</spam></a>
 </li>        
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f44-lego-magazine">LEGO® Magazine</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f45-lego-store-france">LEGO® Store FR</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f8-videos-lego">Videos LEGO®</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Partenaires</spam></dt>
 <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f25-site-forum"><span style="color: #FF0000;">Informations</spam></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/t506-partenaires"><span style="color:;">Nos Partenaires</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t954-devenir-un-partenaire-du-crazy-mocs"><span style="color:;">Etre Partenaire?</span></a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Partie Privée</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f33-la-papotte-interne-et-flood-hors-sujet">Papote/Flood</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f30-concours">Concours</a>
 </li>
 <li>
                           <a href="http://www.crazymocs.com/f31-sondages">Sondages</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f3-collections">Collections</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f34-identification-de-pieces-et-de-sets-lego">Identification</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f1-faq-actif">FAQ Actif</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f10-crazy-jeux">Crazy Jeux</a>
 </li>
 </ul>
                  </dd>
</dl>
<dl>
 <dt><span style="color: #F7F7F7;">Créations</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f5-sets-officiels-lego">Set Officiels</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f14-moc-classiques">Mocs Classiques</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f46-moc-licences">Mocs Licences</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f16-autres-mocs">Autres Mocs</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f4-scenettes-lego">Scènettes</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">C.A.D</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f17-computer-aided-design">C.A.D</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f50-moc-cad">Mocs C.A.D</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #F7F7F7;">Instructions</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f22-instructions-de-set-lego">Instructions Set</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f23-instructions-des-mocs-crazy">Instructions CM</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f24-astuces-d-assemblages">Astuces</a>
 </li>
 </ul>
                  </dd>
</dl>
 <dl>
 <dt><span style="color: #2299CC;">A/V/E</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f13-minifigures-echanges-par-ici"><span style="color: ;">Minifigs</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f18-achat-vente-echange">A/V/E</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f37-feedback">Feedback</a>
 </li>
 </ul>  
                 </dd>
</dl>
 <dl>
 <dt><span style="color: #C9720E;">Association</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/t1149-cotisations-association-crazy-mocs"><span style="color:#C9720E;">Cotisations</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1417-recepisse-de-l-association"><span style="color: #C9720E;">Récépissé</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1258-reglement-interieur"><span style="color: #C9720E;">Règlement</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1148-statuts-crazy-mocs-association"><span style="color: #C9720E;">Statuts</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2578-hierarchie-crazy-mocs#28925"><span style="color: #C9720E;">Hiérarchie</span></a>
 </li>
                   <li><center>------</center></li>
 <li>
 <a href="http://www.crazymocs.com/f51-ambassade-lego">Ambassade</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f26-discussion-generale">Discussion G</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f41-sondage">Sondage</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f27-assemblee-generale-et-comptes-rendus">Assemblée G</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f28-lug-bulk">LUG Bulk</a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/f29-expositions">Expositions</a>
 </li>
 </ul>
                 </dd>
</dl>
 <dl>
                  <dt><span style="color: #F7F7F7;">FAQ - TUTO !!!!</spam></dt>
                  <dd style="display:none;">
 <ul>
 <li>
 <a href="http://www.crazymocs.com/f20-faq-tuto-besoin-d-aide">Rubrique Général</a>
 </li>
                  <li><center>--FAQ--</center></li>
 <li>
 <a href="http://www.crazymocs.com/t19-lexique-des-termes-et-abreviations-utilises-par-les-fols"><span style="color: Navy;">Lexique LEGO®</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t400-lavage-de-lego"><span style="color: Navy;">Lavage LEGO®</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t24-bricklink-comment-acheter"><span style="color: Navy;">Bricklink Astuce</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2054-palette-des-couleurs-de-nos-briques"><span style="color: Navy;">Couleurs Brick</span></a>
 </li>
 <li><center>--FORUM--</center></li>
<li>
 <a href="http://www.crazymocs.com/t231-rangs-du-forum"><span style="color: DarkGreen;">Rangs du Forum</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t188-explication-boutons-du-forum"><span style="color: DarkGreen;">Bouton Forum</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t1872-medailles-d-honneurs"><span style="color: DarkGreen;">Médailles d'Honneurs</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t2103-guide-du-crazy-j-aime"><span style="color: DarkGreen;">Crazy J'aime</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t303-couleurs-des-categories-et-forums-crazy-mocs#3216"><span style="color: DarkGreen;">Catégories Forum</span></a>
 </li>
                  <li><center>--AIDE--</center></li>
 <li>
 <a href="http://www.crazymocs.com/t332-aide-mettre-une-image-sur-le-forum"><span style="color: DarkRed;">Mettre une Image</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t93-aide-mettre-une-video-sur-le-forum"><span style="color: DarkRed;">Mettre une Vidéo</span></a>
 </li>
 <li>
 <a href="http://www.crazymocs.com/t760-aide-mettre-une-signature-ou-un-avatar-sur-le-forum"><span style="color: DarkRed;">Avatar/Signature</span></a>
 </li>
 </ul>
                  </dd>
 </dl>
 </FONT>
                                      </div>

Mon CSS :

Code:
/*Menu V2 Déroulant (Portail)*/
        /*liste des menus*/
        #menu ul{padding: 0px;
            list-style-type: none;
        margin: 0px;
        }
        #menu{
            margin-top:-8px
        }
        /*positionnement des menus*/
        #menu dl {
            float: left;
            width: 120px;}
        
       /*menus*/
        #menu dt {
            color: blue;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            background: #575757;
            border: 1px solid black;
            margin: 0px;}
        
       /*menus au survol*/
        #menu dt:hover{
            border-bottom: none!important;
    background: #e6cf00;
    color: #000000!important;}
        
       /*liste des sous-menus*/
        #menu dd {
            display: none;
            border: 1px solid black;
            border-top: none!important;
            background: #575757;
            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: black;
            text-align: center;
            width: 118px;
            cursor: pointer;
            font-weight: bold;
            background: #e6cf00;
            margin: 0px;
            padding: 0px;
            list-style-type: none;}

Merci d'avance pour votre aide.
Desolation.


Dernière édition par Desolation le Lun 5 Mai - 19:54, édité 1 fois

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Menu Déroulant Portail

Message par Self le Lun 5 Mai - 18:43

Bonjour,

Essayez en remplaçant votre javascript par celui-ci :
Code:
$(function(){
    $("#menu dl").each(function(){
      $(this).click(function(){
          $(this).find('dd').slideToggle();
      });
    });
});

Cordialement Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu Déroulant Portail

Message par Desolation le Lun 5 Mai - 19:53

Merci pour ton aide, cela fonctionne a merveille ;)HOAH.

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

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


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