0

https://codepen.io/grantsmith/pen/YQweRb

I am trying to get my branded header menu, sub menu to appear upon hover. The code is pretty long, hence the code pen.

I’m targeting any 'a' in the menu that has children, and toggle the .nav-dropdown class.

Perhaps this is wrong way to go about this, open to suggestions. This is bound to be a jQuery issue as I'm pretty new to it.

(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
  $(this).siblings('.nav-dropdown').toggle();
  $('.nav-dropdown').not($(this).siblings()).hide();
  e.stopPropagation();
});
$('html').click(function() {
  $('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);
Grant Smith
  • 5
  • 6

1 Answers1

0

Try this: https://codepen.io/anon/pen/KqVovo

(function($) {
  $(function() {
    $('nav>ul>li').mouseenter(function(e) {
      $(this).children('.nav-dropdown').show();
    });
    $('nav>ul>li').mouseleave(function(e) {
      $('.nav-dropdown').hide();
    });
  });
})(jQuery);
  • This is much closer, however, sub menu doesn't stay open to be able to select the sub menu li's – Grant Smith Jun 09 '17 at 16:02
  • Updated. Removed lots of stuff, changed to `mouseenter()` and `mouseleave()` for more control. –  Jun 09 '17 at 20:29
  • This is perfect, I'm still a complete novice when it comes to javascript :(. Thanks for your help – Grant Smith Jun 10 '17 at 08:07
  • Just as an update, in case anyone else wishes to use the code. Although the sub menu showing issue is fixed. There is still an issue with the mobile toggle not showing/firing on hover? – Grant Smith Jun 10 '17 at 08:34
  • What mobile toggle? Keep in mind it's impossible to "hover" on mobile... –  Jun 12 '17 at 15:33