Trying to use jQuery slideDown() on a Woocommerce child theme

  • As the title suggests I have a woocommerce child theme and I’m trying to get the nav elements to slide down on mouseover and up on mouseout.

    My JS is below.

    
    $('.menu-item-has-children').mouseover(function() {
        $('.sub-menu').slideDown();
    });

    My HTML is structed roughly like this.

    
<div class="storefront-primary-navigation">
  <div class="col-full">
    <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">
		<button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"> 
          <span>Menu</span>
        </button>
		  <div class="primary-navigation">
            <ul id="menu-nav" class="menu">
              <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13">
                <a href="https://www.highwest.com/spirits">Drink</a>
                  <ul class="sub-menu">
	                <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18">        <a href="https://buy.highwest.com/products/american-prairie-bourbon">American Prairie Bourbon</a></li>
	<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="https://buy.highwest.com/products/double-rye-2">Double Rye!</a></li>
	<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-20"><a href="https://www.highwest.com/spirits.php">Barrel Finished Cocktails</a>
	<ul class="sub-menu">

    I’m not sure why this simple piece of jQuery is not working unless it has to do with Storefront overwriting what I’m trying to implement.

    From everything I’ve been able to find online people just say to use the slideDown() function on wordpress so I haven’t come across anything stating that it shouldn’t work.

    My other JS is functioning and the JS I wrote for my other site functions as well.

    I am not new to coding but I am new to wordpress development so any help would be greatly appreciated. I’m sure I’m missing something simple but I can’t figure out what, and haven’t been able to come across the answer online.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I think the default CSS hover effect is masking whatever slideDown effect might also be invoked. You want the CSS setup to display the submenu in the right position and the CSS is just hiding it with display: none. I think the current CSS hides submenus way off to the side, which may not be the right model for .slideDown(). Also comment out any related :hover pseudo-selectors that expose the submenus so jQuery can do its thing.

    Instead of using slideDown, maybe stick with the current CSS scheme and animate the submenu exposure with CSS rules?

    Thread Starter mattborgman

    (@mattborgman)

    @bcworkz – Thanks I will try that. I got the slide down effect using CSS transition but was unable to get the slide up working using just CSS that was when I switched to jQuery thinking it would be simpler.

    But I understand what you are saying and will try again with the CSS transition approach.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to use jQuery slideDown() on a Woocommerce child theme’ is closed to new replies.

Tags