Dropdown-Menü bei Hover geöffnet, anstatt auf "shartify" zu klicken

Question

Ich versuche ein shopify-Thema zu bearbeiten und der letzte Teil, auf dem ich feststecke, ist, dass diese Navigationsmenüs beim Schweben statt beim Klicken geöffnet werden. Die CSS-I für die Menüs ist:

.site-nav { 
    position: relative; 
    padding: 0; 
    text-align: center; 
    margin: 25px 0; 

    a { 
    padding: 3px 10px; 
    } 

    li { 
    display: inline-block; 
    } 
} 

.site-nav--centered { 
    padding-bottom: $gutter-site-mobile; 
} 

/*================ Site Nav Links ================*/ 
.site-nav__link { 
    display: block; 
    white-space: nowrap; 

    .site-nav--centered & { 
    padding-top: 0; 
    } 

    .icon-chevron-down { 
    width: 8px; 
    height: 8px; 
    margin-left: 2px; 

    .site-nav--active-dropdown & { 
     transform: rotateZ(-180deg); 
    } 
    } 

    &.site-nav--active-dropdown { 
    border: 1px solid $color-border; 
    border-bottom: 1px solid transparent; 
    z-index: 2; 
    } 
} 

/*================ Dropdowns ================*/ 
.site-nav--has-dropdown { 
    position: relative; 
} 

.site-nav--has-centered-dropdown { 
    position: static; 
} 

.site-nav__dropdown { 
    display: none; 
    position: absolute; 
    left: 0; 
    padding: $dropdown-padding; 
    margin: 0; 
    z-index: $z-index-dropdown; 
    text-align: left; 
    border: 1px solid $color-border; 
    background: $color-bg; 
    left: -1px; 
    top: 41px; 

    .site-nav__link { 
    padding: 4px 30px 4px 0; 
    } 

    .site-nav--active-dropdown & { 
    display: block; 
    } 

    li { 
    display: block; 
    } 
} 

// Centered dropdown 
.site-nav__dropdown--centered { 
    width: 100%; 
    border: 0; 
    background: none; 
    padding: 0; 
    text-align: center; 
} 

Die HTML und Liquid für den Header ist:

 {% if section.settings.align_logo == 'left' %} 
     <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation"> 
      {% include 'site-nav' %} 
     </nav> 
     {% endif %} 

Und das entsprechende Menü Javascript:

/* ================ MODULES ================ */ 
window.theme = window.theme || {}; 

theme.Header = (function() { 
    var selectors = { 
    body: 'body', 
    navigation: '#AccessibleNav', 
    siteNavHasDropdown: '.site-nav--has-dropdown', 
    siteNavChildLinks: '.site-nav__child-link', 
    siteNavActiveDropdown: '.site-nav--active-dropdown', 
    siteNavLinkMain: '.site-nav__link--main', 
    siteNavChildLink: '.site-nav__link--last' 
    }; 

    var config = { 
    activeClass: 'site-nav--active-dropdown', 
    childLinkClass: 'site-nav__child-link' 
    }; 

    var cache = {}; 

    function init() { 
    cacheSelectors(); 

    cache.$parents.on('click.siteNav', function(evt) { 
     var $el = $(this); 

     if (!$el.hasClass(config.activeClass)) { 
     // force stop the click from happening 
     evt.preventDefault(); 
     evt.stopImmediatePropagation(); 
     } 

     showDropdown($el); 
    }); 

    // check when we're leaving a dropdown and close the active dropdown 
    $(selectors.siteNavChildLink).on('focusout.siteNav', function() { 
     setTimeout(function() { 
     if ($(document.activeElement).hasClass(config.childLinkClass) || !cache.$activeDropdown.length) { 
      return; 
     } 

     hideDropdown(cache.$activeDropdown); 
     }); 
    }); 

    // close dropdowns when on top level nav 
    cache.$topLevel.on('focus.siteNav', function() { 
     if (cache.$activeDropdown.length) { 
     hideDropdown(cache.$activeDropdown); 
     } 
    }); 

    cache.$subMenuLinks.on('click.siteNav', function(evt) { 
     // Prevent click on body from firing instead of link 
     evt.stopImmediatePropagation(); 
    }); 
    } 

    function cacheSelectors() { 
    cache = { 
     $nav: $(selectors.navigation), 
     $topLevel: $(selectors.siteNavLinkMain), 
     $parents: $(selectors.navigation).find(selectors.siteNavHasDropdown), 
     $subMenuLinks: $(selectors.siteNavChildLinks), 
     $activeDropdown: $(selectors.siteNavActiveDropdown) 
    }; 
    } 

    function showDropdown($el) { 
    $el.addClass(config.activeClass); 

    // close open dropdowns 
    if (cache.$activeDropdown.length) { 
     hideDropdown(cache.$activeDropdown); 
    } 

    cache.$activeDropdown = $el; 

    // set expanded on open dropdown 
    $el.find(selectors.siteNavLinkMain).attr('aria-expanded', 'true'); 

    setTimeout(function() { 
     $(window).on('keyup.siteNav', function(evt) { 
     if (evt.keyCode === 27) { 
      hideDropdown($el); 
     } 
     }); 

     $(selectors.body).on('click.siteNav', function() { 
     hideDropdown($el); 
     }); 
    }, 250); 
    } 

    function hideDropdown($el) { 
    // remove aria on open dropdown 
    $el.find(selectors.siteNavLinkMain).attr('aria-expanded', 'false'); 
    $el.removeClass(config.activeClass); 

    // reset active dropdown 
    cache.$activeDropdown = $(selectors.siteNavActiveDropdown); 

    $(selectors.body).off('click.siteNav'); 
    $(window).off('keyup.siteNav'); 
    } 

    function unload() { 
    $(window).off('.siteNav'); 
    cache.$parents.off('.siteNav'); 
    cache.$subMenuLinks.off('.siteNav'); 
    cache.$topLevel.off('.siteNav'); 
    $(selectors.siteNavChildLink).off('.siteNav'); 
    $(selectors.body).off('.siteNav'); 
    } 

    return { 
    init: init, 
    unload: unload 
    }; 
})(); 

Jede Hilfe sehr würde geschätzt. Ich fühle mich so dumm, eine einfache Frage wie diese zu stellen. Ich kann einfach nicht herausfinden, wo :hover in den Code zu setzen. Es sieht ziemlich nach vorne aus, aber ich verstehe es nicht. Sie können die Website hier sehen: AlexandIvy.myShopify.com und das Passwort, um es anzuzeigen, ist stesk. Ich spreche nur über die oberen Navigationsmenüs.

Dies ist der Code von der Konsole:

<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation"> 
      <ul class="site-nav list--inline " id="SiteNav"> 


     <li class="site-nav--has-dropdown"> 
     <a href="/collections/bedding" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-bedding"> 
      Bedding 
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 498.98 284.49"><defs><style>.cls-1{fill:#231f20}</style></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg> 
      <span class="visually-hidden">expand</span> 
     </a> 

     <div class="site-nav__dropdown" id="SiteNavLabel-bedding"> 
      <ul> 

       <li> 
       <a href="/collections/sheet-sets" class="site-nav__link site-nav__child-link">Sheet Sets</a> 
       </li> 

      </ul> 
     </div> 
     </li> 

Answer 1

Da Sie JS verwenden Sie die Dropdown-Listen zu verbergen/zeigen, ich schlage vor, Sie dies tun, wenn Sie mit JQuery bequem sind.

$('.site-nav--has-dropdown').hover(function() { 

    if ($(this).hasClass('activated')){ 
    $(this).removeClass('activated'); 
    $(this).children('.site-nav__dropdown').css('display', 'none'); 
    } 
    else{ 
    $(this).addClass('activated'); 
    $(this).children('.site-nav__dropdown').css('display', 'block'); 
    } 
}); 

Die Idee dahinter ist, dass das Kind zu .site-nav--has-dropdown am nächsten, die einen Klassennamen hat .site-nav__dropdown kann auf schweben aktiviert werden. Sie können auch pols Code verwenden, der einen anderen (und kürzeren) Ansatz bietet.

Answer 2

Sie sollten mouseover/mouseout Methoden in jquery verwenden.

$('.site-nav--has-dropdown').mouseover(function() { 
    $(this).children('.site-nav__dropdown').show(); 
}); 

$('.site-nav--has-dropdown').mouseout(function() { 
    $(this).children('.site-nav__dropdown').hide(); 
}); 

---

Oder nur CSS :hover,
zur besseren Unterstützung von Touch-Geräten Sie :focus auch hinzufügen sollten.

.site-nav--has-dropdown:hover .site-nav__dropdown, 
.site-nav--has-dropdown:focus .site-nav__dropdown { 
    display: block; 
} 

jsfiddle Demo: sfiddle.net/8p33qh9h