Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts

    how to make this menu ?

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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):
    PHP Code:
    $('#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() > && $(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() > && $(this).closest('li').is('.current')) { // if submenu is open and current link is clicked
            
    $('#submenu').animate({height0});
        }
        else { 
    // if submenu is not open
            
    $('#submenu').load(target,function() {
                $(
    this).animate({height'300px'});
            });
        }
    }); 
    Also add the following CSS:
    Code:
    #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.

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    thanks a lot for your help, i finaly succeeded with this:
    Code:
    $("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()
    
    })


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •