jQuery drop-down menu issues, placed arrows on menu links but menu fades away when the arrows are hovered over

3 Views

I’ve implemented a drop-down menu on my website with jQuery and it functions fine, but I wanted to place an arrow on the links that have sub-menus. The issue with this is, once you hover over said arrow as you’re “technically” not hovering over the drop-down element anymore the drop-down disappears and reappears again. How can I get around this?

HTML:

Read More
<nav id="site-navigation" class="main-navigation top-bar" data-topbar role="navigation" style="float:right;" data-topbar>
 <section class="top-bar-section">
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 </section>
  <div class="arrow-left-1"></div>
  <div class="arrow-left-2"></div>
  <div class="arrow-left-3"></div>
  <div class="arrow-left-4"></div>
  <div class="arrow-left-5"></div>
</nav>

CSS: 

.arrow-left-1, .arrow-left-2, .arrow-left-3, .arrow-left-4, .arrow-left-5 {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #95020a;
  position: absolute;
  display: none;
  z-index: 900;
}

.arrow-left-1 {
  left: 58%;
  top: 138%;
}

jQuery: 

$('#menu-item-1837' ).hover(
    function(){
        $(this).children('.sub-menu').fadeIn('medium');
        $('.arrow-left-1').show();
        $('.arrow-left-2').show();
        $('.arrow-left-3').show();
        $('.arrow-left-4').show();
        $('.arrow-left-5').show();
    },
    function(){
        $(this).children('.sub-menu').fadeOut('medium');
        $('.arrow-left-1').hide();
        $('.arrow-left-2').hide();
        $('.arrow-left-3').hide();
        $('.arrow-left-4').hide();
        $('.arrow-left-5').hide();
    }
);
Post Views: 3

Related posts

3 comments

  1. You could use the :after or :before selectors to add the arrows as the ‘content’, instead of creating a new div for each one.

    http://www.w3schools.com/cssref/sel_after.asp

    Edit: Based on your code you’re using WordPress – so there would be no need to add Javascript/jQuery to add elements to your submenu.

    Look at the code that WordPress creates and use the elements provided to add a CSS arrow.

    ul.sub-menu li.menu-item-has-children:after {
content:'>';
color:#fff;
}

    Here’s just a small example, but use it to customise your elements.
    Hope this helps

  2. Remove the hard-coded arrows and add :after pseudo-element to your class menu-item-has-children.

    You can style the arrow accordingly.

    .menu-item-has-children::after { 
    content: "";    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #95020a;
    float: right;
}

    To select the hovered class, select like this:

    .menu-item-has-children:hover::after {
    border-left-color: white;
}

    You can see a small working example here.

  3. I think you have found a solution to the problem already cause it seems to be working fine in your website. If not, please let us know.

Comments are closed.