Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Animate WordPress Jquery Subnav Dropdown

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #201804
    nolimit966
    Participant

    Hi,

    Ive wrote a sub nav for my bespoke WordPress theme but I want to animate the dropdown of the nav (and slideup). It currently works via display:hidden; – The Jquery changed the ul to a display: block when hover or click.

    Heres an example of what I have done so far:

    jQuery(function($) {
     $("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
     function(){
    
         var visibleMenu = $("ul.sub-menu:visible");
         if (visibleMenu) {
            $(visibleMenu).hide(); }
    
        $('ul.sub-menu', this).show();
    
        $("#menu-main-menu").mouseleave(function(){
        $("ul.sub-menu").hide(); 
      });
    }
    
    );
    })
    

    Id really like it to be a slick and smooth dropdown – does anyone know where I can add the slideup / slidedown to this?

    I have it in codepen too if this helps: http://codepen.io/anon/pen/jPbJMJ

    Thank you

    #201805
    Paulie_D
    Member

    Jquery has Slide functions built in

    http://api.jquery.com/category/effects/sliding/

    #201806
    nolimit966
    Participant

    Im aware of that, i just don’t have a clue WHERE the slidein functions go.

    Ive tried about 30 different ways & not a single one has worked including css transitions.

    Where would the SlideUp go?

    #201807
    Paulie_D
    Member

    Whoa…there’s a shipload of extraneous CSS and HTML in that Codepen.

    Any chance of just simplifying it down to just the relevant stuff?

    https://css-tricks.com/reduced-test-cases/

    #201808
    Paulie_D
    Member

    Just substituting slides for hide and show gets you part of the way but I thiny you may have to re-think the way the interaction goes.

    Perhaps adding delays or timeOuts.

    http://codepen.io/Paulie-D/pen/VLvOda

    #201809
    nolimit966
    Participant

    sorry for the extraneous CSS and HTML Paulie_D. I literally copied the lot in there. Yeh i tried adding replacing the slideup / slidedown for the hide and show but its not working on the live site. Not sure why. I can see the issues from what you done on CodePen too.

    The fact that when you mouse off its trying to slide up.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.