Menu survol
Bonjour,
Je suis sur un gros projet(Stage), et je suis débutant en Javascript.
Je suis censé rendre un menu cliquable au lieu qu'il survol en passant la souris, en gros, j'ai fouillé un peu le code, et j'ai trouvé qu'au niveau de cette fonction qu'il fait l'animation :
Que dois-je modifier pour que le menu devient cliquable ?
Merci d'avance
Je suis sur un gros projet(Stage), et je suis débutant en Javascript.
Je suis censé rendre un menu cliquable au lieu qu'il survol en passant la souris, en gros, j'ai fouillé un peu le code, et j'ai trouvé qu'au niveau de cette fonction qu'il fait l'animation :
// HIDE / SHOW SOUS-MENU
function open( index, force ){
// log.green( index, 'open')
if(force) var speed=0;
else var speed=300;
var $this = $('#sous-menu .index_sm').eq(index);
if( $('.anim-sous-menu', $this).length == 0 ) return;
if(cssTransition){
if(speed===0)
$this.removeClass('hide').addClass('show_now');
else
$this.removeClass('hide').addClass('show');
}else
$this.animate({'top':'0px'}, { duration: speed, queue: false }).fadeIn({ duration:speed, queue:true });
};
Que dois-je modifier pour que le menu devient cliquable ?
Merci d'avance
1 réponse
-
Bonjour, pour commence ce code est rédigé avec Jquery.
Qui plus est il faudrait trouver la ligne qui appelle cette procédure.
Elle devrait ressembler à ceci:$menu.hover(function(){
open($this, false);
});
il te suffira de remplacer le listenner ci-dessus par:
$menu.click(function(){
open($this, false);
});
voilà tout.
-
ça n'a pas marché, apparrement ce n'est pas sur cette partie la du code que je dois changer, est-ce que ça peut être du CSS ?
voilà la partie concerné :
// sous-menu
#sous-menu{
position: relative;
z-index: 3;
>li{
position: absolute;
left: 0; top: -170px;
width: 100%;
height: 170px;
overflow: hidden;
// background-color: rgba(255, 0, 0, 0.2);
.anim-sous-menu{
position: absolute;
width: 100%;
top: 0px;
z-index: 1;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
.sous-menu{
background-color: @color3;
// border-bottom: 1px solid @color4;
/*.back{
// -webkit-backface-visibility: hidden;
background-color: @color3;
// border-bottom: 1px solid @color4;
// opacity: @opacity;
}*/
.ariane{
position: relative;
margin: 0 0 0 55px;
font-size: 13px;
color: @font_dark;
// display: none;
li{
position: relative;
display: inline-block;
padding-top: 14px;
font-weight: bold;
a{
text-decoration: underline;
color: @font_dark;
font-weight: bold;
}
img{
margin: 0 5px;
}
}
} -
-
