Menu coulissant au passage de la souris
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Menu coulissant au passage de la souris
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
Re: Menu coulissant au passage de la souris
Un petit up
Merci
Merci
Re: Menu coulissant au passage de la souris
Un petit up
Re: Menu coulissant au passage de la souris
Bonjour "hippocampe"
Normal tu fais appel à une fonction JS -> toggle dans ton Script
il faut intégrer cela dans une "Div" avec fonction "hover"
Jette un œil la solution est < ici > donnée par -> MlleAlys
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
Re: Menu coulissant au passage de la souris
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
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
Re: Menu coulissant au passage de la souris
Re - "hippocampe"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
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)){
- Code:
};
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
Sujets similaires
» Enlever le fond du menu (au passage de la souris)
» Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris
» Imbriquer une image qui s'active au passage de la souris dans le menu accordéon
» Menu personnalisé (barre de navigation) : changement de l'image au passage de la souris
» menu coulissant
» Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris
» Imbriquer une image qui s'active au passage de la souris dans le menu accordéon
» Menu personnalisé (barre de navigation) : changement de l'image au passage de la souris
» menu coulissant
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum