how to make this menu ?

[sybil6]

hello,
i am trying to achive a effect/ behavior that is found in the menu on this page:
http://www.canalplus.fr/

the menu that says: SPORT CINEMA SERIES/FICTIONS (the menu you can slide down )

basically when you click on a menu like SPORT , a div will slide down with the SPORT content then if you click on CINEMA , the cinema content will fadeIn and if you click again on SPORT it will fadeIn and only if you click again on SPORT the SPORT content div will slideUp, this is basically what i am trying to achive such behavior, any hint to what to i have to use?
regards

[VIPStephan]

I guess all of the JS frameworks will do the job in one or the other way. I only know jQuery fairly well, though, and it’s relatively simple with that one.

Note that what I provide here is totally untested and just out of my mind really quickly so I don’t guarantee that it works. But it’s not my intention to give you the complete solution anyway, I’m just giving you a hint n which direction you have to go.

Now, write your regular menu HTML (I assume an unordered list with ID “mainmenu”) and style it with CSS. I aslo assume that teh submenu contents will be in their own separate external HTML files that are referenced in the href attributes of each main menu link. Then apply the following script when the DOM is ready (i. e. inside a $(function() {…}); function):
$('#mainmenu').after('<div id="submenu"></div>');
$('#mainmenu a').click(function() {
$('#mainmenu li').removeClass('current'); //remove any previously added current class if applicable
$(this).closest('li').addClass('current'); // add curent class to the list item whose child anchor has been clicked
var target = $(this).attr('href'); // get href value of anchor
if($('#submenu').height() > 0 && $(this).closest('li').not('.current')) { // check if submenu div is open and if the link clicked is not the current one; if condition is true perform following lines
$('#submenu').children().fadeOut(function() { // fade out all direct children of submenu container
$('#submenu').empty().load(target, function() { // remove contents of submenu container and load new content
$(this).children().hide().fadeIn(); // hide new content initially and fade it in
});
});
}
else if($('#submenu').height() > 0 && $(this).closest('li').is('.current')) { // if submenu is open and current link is clicked
$('#submenu').animate({height: 0});
}
else { // if submenu is not open
$('#submenu').load(target,function() {
$(this).animate({height: '300px'});
});
}
});

Also add the following CSS:

#submenu {
overflow: hidden;
height: 0;
}

Also you’ll have to style the contents of the submenu with CSS, of course.
jQuery has a really good documentation in case you need to look up some function or selector or whatever.
Good luck.

[sybil6]

thanks a lot for your help, i finaly succeeded with this:
$("div#menu").children().click(function(){

if($("div#parent").height() == 0 && $(this).hasClass("start")){
$("div#parent").animate({height: "300px"})
}

else if($("div#parent").height() > 0 && $(this).hasClass("selected")){
$("div#parent").animate({height: "0px"}, function(){
$("div#menu").children().removeClass("selected")
})

}

$(this).addClass("selected").siblings().removeClass("selected")
$("div#"+this.id+"_content").fadeIn().siblings().fadeOut()

})