Bonjour à tous!
J'ai développé un menu dynamique en jquery sur un site wordpress http://newradio.aurovilleradiotv.org. Lorsque l'on passe sur un item du menu, le code load les 4 derniers articles de la catégorie en question. Tout fonctionne bien mais j'ai des soucis avec les animations:
1. Je ne parviens pas à enrouler/dérouler le menu avec une jolie transition, cela casse le menu
2. Il y a un bug étrange quand je quitte le menu, de temps en temps le menu se reload tout seul sans faire apparaitre les sous-catégories sur la gauche
3. J'aimerais que le menu ne se déroule que quand je reste au moins 2 secondes sur #querymenu
Voici mon code, j'ai travaillé énormément dessus parce que je débute en jquery, mais là je sèche, donc toute aide sera grandement appréciée!
J'ai développé un menu dynamique en jquery sur un site wordpress http://newradio.aurovilleradiotv.org. Lorsque l'on passe sur un item du menu, le code load les 4 derniers articles de la catégorie en question. Tout fonctionne bien mais j'ai des soucis avec les animations:
1. Je ne parviens pas à enrouler/dérouler le menu avec une jolie transition, cela casse le menu
2. Il y a un bug étrange quand je quitte le menu, de temps en temps le menu se reload tout seul sans faire apparaitre les sous-catégories sur la gauche
3. J'aimerais que le menu ne se déroule que quand je reste au moins 2 secondes sur #querymenu
Voici mon code, j'ai travaillé énormément dessus parce que je débute en jquery, mais là je sèche, donc toute aide sera grandement appréciée!
//******** LOAD LATEST POST IN MAIN MENU *******************************************************************************************/
var item
jQuery.noConflict()(function($){
$(document).ready(function(){
//When the mouse leave the menu area, hide the menu
$('.menu-top').mouseleave(
function(){
clearTimeout(timer);
timer = setTimeout(function() {
$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400,'swing',function(){
var hideList = $('.snav');
for(j=0; j<hideList.length; j++)
{
var h = hideList[j];
$(h).css('display','none');
}
});
}, 500);
return false;
}
);
var items = $('.fnav>li.menu-item');
//alert(items);
for(i=0; i<items.length; i++)
{
item = $(items[i]); // convert to a jquery element in order to use jquery methods
//alert(item);
var id=item.attr('id');
id+="-child";
var child=item.find('.snav');
child.css('display','none');
//child.addClass(id,'child-menu');
child.addClass(id);
//child.addClass('child-menu');
child.appendTo('#submenu-items');
item.mouseenter(function(){
var hideList = $('.snav');
for(j=0; j<hideList.length; j++)
{
var h = hideList[j];
$(h).css('display','none');
}
var me = $(this); // to call the element from inside its function
var id=me.attr('id');
var childClass='.'+id+'-child';
//alert(childClass);
$(childClass).css('display','');
//height = $("#queryContainer").height() + 'px';
//height = $(childClass).height() + 100 + 'px';
height = 'auto';
$("#querySort").stop().animate({height:height, opacity: 1}, 400);
//sleep(1000);
//alert(childClass);
/*
$(childClass).stop().fadeOut(200,
function(){
$("#submenu-items").stop().fadeIn(200)
}
)
*/
//$("#submenu-items").animate({opacity: 0}, 400);
$(childClass+'>li:first-child').trigger('mouseenter');
})
}
// });
//jQuery(function($) {
var timer;
var request;
var parent;
// replace these default settings with your own
$.querySort = {
path_to_template: 'http://newradio.aurovilleradiotv.org/wp-content/themes/valor/',
number_of_posts: 4,
default_category: ''
}
$("#querySort").css({opacity: 0, height: '0px'});
//functions for the sorter
$(".snav li").mouseenter(
function(){ //hover In
if(timer) {
clearTimeout(timer);
timer = null
}
var thecat = $(this).attr("data");
var query = 'query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + thecat;
$("#querySort").stop().animate({opacity: 0}, 400);
if ( request != undefined )
{
request.abort();
}
request = $.ajax({
type: "GET",
url: $.querySort.path_to_template + 'querySort.php',
data: query,
success: function(msg){
$("#querySort").html( msg );
$(".submenu-entry").hover(
function(){
if(timer) {
clearTimeout(timer);
timer = null
}
return false;
}
);
height = $("#queryContainer").height() + 'px';
$("#querySort").stop().animate({height:height, opacity: 1}, 400);
}
});
/*
$("#querySort").load($.querySort.path_to_template + 'querySort.php' + query, function() {
$(".submenu-entry").hover(
function(){
if(timer) {
clearTimeout(timer);
timer = null
}
return false;
},
function(){
clearTimeout(timer);
timer = setTimeout(function() {
$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400);
}, 500);
return false;
}
);
height = $("#queryContainer").height() + 'px';
$("#querySort").stop().animate({height:height, opacity: 1}, 400);
});
*/
return false;
} /*,
function(){ //hover Out
timer = setTimeout(function() {
$("#querySort").stop().animate({opacity: 0, height: '0px'}, 400);
}, 500);
return false;
} */
);
});
})
[/i]