Menu coulissant au passage de la souris

2 participants

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

Résolu Menu coulissant au passage de la souris

Message par hippocampe Mar 24 Jan 2017 - 6:41

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://escale-majuscule.forumactif.org/

Description du problème

Bonjour ,
j'ai trouvé un menu coulissant avec mes recherches
j'aimerais savoir si c'est possible d'ouvrir ce menu au passage de la souris ainsi que la fermeture si le pointeur s'en éloigne
J'ai modifié aussi pour avoir des sous-menus qui fonctionnent
Merci à vous

voila le JS

Code:
$(function(){

   $("body").append('<div id="fp549" class="fpanel">
                        <table class="fptable">
                        <tr>
                        <td class="fpcontent">
<style  type="text/css">
    #list_deroul {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 16px; font-weight:bold;}
    #list_deroul ul ul {display: none; position: relative; margin: 0px; padding: 0px;}
        #list_deroul li {list-style-type: none; position: relative; width: 180px; background-color: #FF9900; padding: 0px;  margin: 0px}
        #list_deroul li:hover  {background-color: #99CC00;}
        #list_deroul li a {text-decoration:none; color: black;}
        #list_deroul li:hover ul.sous_liste {display: block}
    </style>
  </head>
<body>
    <div  id="list_deroul">
      <ul>
        <li>
          <a> MENU 1 <a />
          <ul  class="sous_liste">
          <li><a href="Adresse URL" >Sous menu 1<a/>
                        </li>
           
                  </ul>
                        <br>
                  <li>
        <a>MENU 2 <a />
          <ul  class="sous_liste">   
            <li><a href="Adresse URL" >Sous menu 2 </a> </li>         
           
          </ul>   
         
        </li>
        </li>   
      </ul>
    </div>
              <td class="fpbuttons"><span class="fpopen">
                        <img src="https://i37.servimg.com/u/f37/16/04/56/28/ouvrir12.png" /></span><span class="fpclose"><img src="https://i37.servimg.com/u/f37/16/04/56/28/fermer10.png" /></span></td></tr><table></div>');
   $("#fp549 .fpbuttons > span").click(function(){
      $(this).add($(this).siblings()).toggle();
      $("#fp549").animate({"left":$(this).is(".fpclose")?-222:0},1000);
   });

});

Voila le CSS

Code:
/*PANNEAU COULISSANT LATERAL GAUCHE*/
.fpanel { position: fixed; }
.fpclose,.fpopen { cursor: pointer; }
.fpclose { display: none; }
#fp549 { top: 10%; left: -230px; }
#fp549 .fpcontent { width: 222px; }


Dernière édition par hippocampe le Ven 27 Jan 2017 - 10:07, édité 1 fois
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par hippocampe Mer 25 Jan 2017 - 10:26

Un petit up
Merci
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par hippocampe Jeu 26 Jan 2017 - 10:15

Un petit up Smile
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par lmc38510 Jeu 26 Jan 2017 - 11:08

Bonjour "hippocampe"

Normal tu fais appel à une fonction JS -> toggle dans ton Script

Code:
 <td class="fpbuttons"><span class="fpopen">                         <img src="https://i37.servimg.com/u/f37/16/04/56/28/ouvrir12.png" /></span><span class="fpclose"><img src="https://i37.servimg.com/u/f37/16/04/56/28/fermer10.png" /></span></td></tr><table></div>');   $("#fp549 .fpbuttons > span").click(function(){      $(this).add($(this).siblings()).toggle();      $("#fp549").animate({"left":$(this).is(".fpclose")?-222:0},1000);   }); });

il faut intégrer cela dans une "Div" avec fonction "hover"

Jette un œil la solution est < ici > donnée par -> MlleAlys


lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par hippocampe Jeu 26 Jan 2017 - 13:32

Merci lmc38510

Je ne suis pas très calé pour faire cette modification alors je vais attendre et voir si on peut me donner la solution
C'est vraiment pas facile ces codes



Et merci à tous ceux qui nous dépanne également
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par lmc38510 Jeu 26 Jan 2017 - 20:50

Je ne suis pas très calé pour faire cette modification alors je vais attendre et voir si on peut me donner la solution
C'est vraiment pas facile ces codes
Re - "hippocampe"

Le temps de réadapter ton Code JS et le CSS correspondant

au début du JS une instruction que tu peux supprimer (cache le menu aux invités)
Code:
 if (_userdata["user_id"]  < (0)){
enlever aussi en fin du JS (si pas caché aux invités)
Code:
};
J'ai également enlevé des href=" inutiles (mis en double) Wink

Les autres liens sont remplacés par " # "

Le JS:

Et le CSS à mettre dans PA -Affichage - Images et Couleurs - CSS

Le CSS:

Le JS et CSS a été testé ... il fonctionne parfaitement Very Happy

lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu coulissant au passage de la souris

Message par hippocampe Ven 27 Jan 2017 - 10:06

Résolu avec brio , merci lmc38510 , très bon travail
Menu coulissant au passage de la souris Merci810
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

http://escale-majuscule.forumactif.org/
hippocampe 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