Menu coulissant au passage de la souris

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 le Mar 24 Jan 2017 - 17: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 - 21:07, édité 1 fois

hippocampe
**

Masculin
Messages : 86
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 le Mer 25 Jan 2017 - 21:26

Un petit up
Merci

hippocampe
**

Masculin
Messages : 86
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 le Jeu 26 Jan 2017 - 21:15

Un petit up Smile

hippocampe
**

Masculin
Messages : 86
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 le Jeu 26 Jan 2017 - 22: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


avatar

lmc38510
*****

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

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

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

Message par hippocampe le Ven 27 Jan 2017 - 0: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

hippocampe
**

Masculin
Messages : 86
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 le Ven 27 Jan 2017 - 7: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:

Code:
$(document).ready(function () {
 
      if (_userdata["user_id"] == (1)){
$('body').append('
<div id="panneau_coulissant">  <!--fp549-->
      <div class="contenu">
      <ul>
          <li>
          <img src="https://i37.servimg.com/u/f37/16/04/56/28/forum10.png">
              <ul class="sous_liste">
                <li><a href="#top"></a>
                <center>
                <a href="#top">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/haut11.png"></a>
                </center>
                </li>
                <li><a href="#bottom"></a>
                <center>
                <a href="#bottom">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/bas12.png"></a>
                </center>
                </li>
              </ul>
          </li>     
          <li>
          <img src="https://i37.servimg.com/u/f37/16/04/56/28/membre10.png">     
              <ul class="sous_liste">
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/locali14.png"></a>
                </center>
                </li>
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/puzzle12.png"></a>
                </center>
                </li>
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/annive10.png"></a>
                </center>
                </li>
                </ul>
          </li>     
          <li>
          <img src="https://i37.servimg.com/u/f37/16/04/56/28/divers10.png">     
                <ul class="sous_liste">
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/journa10.png"></a>
                </center>
                </li>
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/vendre10.png"></a>
                </center>
                </li>
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/ageani13.png"></a>
                </center>
                </li>
                </ul>
            </li>   
            <li>
            <img src="https://i37.servimg.com/u/f37/16/04/56/28/utile10.png">
                <ul class="sous_liste">
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/gaz10.png"></a>
                </center>
                </li>
                <li>
                <center>
                <a href="#" target="_blank">
                <img src="https://i37.servimg.com/u/f37/16/04/56/28/electr10.png"></a>
                </center>
                </li>
                </ul>
              </li>
      </ul>
    </div>
</div>');
};
      });


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

Le CSS:

Code:
/* DEBUT Menu Onglet Lateral -Menu Pause Café- */
     #panneau_coulissant {
       /*width: 160px;*/
       height: 200px;
       content: " ";
       position: fixed;
       top:10%;
       left: -114px;   /* 114*/
       z-index: 100;
       -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
       transition: all 0.5s ease;
    }
     #panneau_coulissant:after {
       background: url("https://i37.servimg.com/u/f37/16/04/56/28/ouvrir12.png") top right no-repeat;
       width: 160px;  
       height: 200px;
       content: " ";
       position: absolute;
       margin-top: -215px;
  }
    #panneau_coulissant:hover {
       left: 70px;
  }
.contenu {
  margin-left:-107px;
  font-family: trebuchet ms, arial, tahoma, verdana, sans-serif;
  font-size: 16px;
  font-weight:bold;
}
.contenu li {
list-style-type: none;
position: relative;
width: 180px;
background-color: #FF9900;
padding: 0px;
margin: 0px;
}
.contenu ul ul {display: none; position: relative; margin: 0px; padding: 0px;}
.contenu li:hover  {background-color: #99CC00;}
.contenu li a {text-decoration:none; color: black;}
.contenu li:hover ul.sous_liste {display: block}
/* FIN Menu Onglet Lateral -Menu Pause Café- */

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

avatar

lmc38510
*****

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

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

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

Message par hippocampe le Ven 27 Jan 2017 - 21:06

Résolu avec brio , merci lmc38510 , très bon travail


hippocampe
**

Masculin
Messages : 86
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


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