‹ Home
Exported

Espiritu Santo - Safety Harbor, FL

Gary Smith, Web Department Director at DiocesanVeronica Alvarado, Project Manager at DiocesanMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanDanae Chudy, Web Designer at DiocesanCody Armock, Web Content Specialist at DiocesanDeacon John Alvarez, Espiritu Santo StaffTerry Ness, Espiritu Santo StaffJeff Fitzcharles, Espiritu Santo StaffAlan Snodgrass, DiocesanMarcus Borger, Developer at Diocesan_SupportRyan Hoch, Web at DiocesanRachel Tupper +2 others
From the list: Build

✔ Menu - Liturgical third level does not work until you hover over another one

Cody A. added this on
Completed by Kyle S.
Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.
Notes
As you can see Liturgical is hovered over in the picture below, but the dropdown doesn't come out until you hover over Outreach or Parish Life and then come back to Liturgical. You know what is going on with this?
image.png 1.13 MB • Download

Comments & Events

Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
What a bear of a fix! But with Ryan's learned guidance, I finally figured it out! Here's the final JS (inspired by Raphael), with emphasis on the main change.
jQuery(document).ready(($) => {
  var timeout;

  function hide(){
    timeout = setTimeout(()=>{
      $('.menu-item').removeClass('active');
    }, 500);
  };

  // Enter menu: stop timer
  $('.theHeader').on('mouseenter', '.menu-item', ()=>{
    clearTimeout(timeout);
  });

  // Enter menu level 0: close others
  $('.theHeader').on('mouseenter', '#primary-menu > .menu-item', function(){
    $('#primary-menu > .menu-item').removeClass('active');
    if($(this).hasClass('menu-item-has-children')) $(this).addClass('active');
  });

  // Enter menu level 1: close others
  $('.theHeader').on('mouseenter', '#primary-menu > .menu-item > .sub-menu > .menu-item', function(){
    $('#primary-menu > .menu-item .menu-item').removeClass('active');
    if($(this).hasClass('menu-item-has-children')) $(this).addClass('active');
  });

  // Enter menu level 2: close others
  $('.theHeader').on('mouseenter', '#primary-menu > .menu-item > .sub-menu > .menu-item  > .sub-menu > .menu-item', function(){
    $('#primary-menu > .menu-item .menu-item .menu-item').removeClass('active');
    $(this).addClass('active');
  });

  // Leave menu: call hide()
  $('.menu-primary-menu-container').on('mouseleave', ()=>{
    hide();
  });
})
Notified 1 person
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.