下拉菜单在悬停时打开，而不是点击shopify

时间：2017-02-09 19:08:14

标签： javascript html css shopify

我正在尝试编辑shopify主题，而我坚持的最后一部分是让这些导航菜单在悬停时打开而不是点击。我对菜单的css是：

.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;
}

标题的HTML和Liquid是：

      {% 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 %}

相关菜单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
  };
})();

非常感谢任何帮助。我觉得这样一个简单的问题很傻。我无法弄清楚将:hover放在代码中的位置。这似乎是相当紧张的前进，但我无法得到它。你可以在这里看到这个网站：AlexandIvy.myShopify.com和查看它的密码是staysk。我只是在谈论顶级导航菜单。

这是来自控制台的代码：

<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>

2 个答案:

答案 0 :(得分：1)

由于您使用JS隐藏/显示下拉列表，我建议您在使用JQuery时这样做。 

$('.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');
  }  
});

这背后的想法是，可以在悬停时激活最接近.site-nav--has-dropdown且具有班级名称.site-nav__dropdown的孩子。您也可以使用 pol的代码，它提供了一种不同（和更短）的方法。

答案 1 :(得分：0)

您应该在jquery中使用mouseover / mouseout方法。

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

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

或者只使用css :hover，
为了更好地支持触摸设备，您还应添加:focus。

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

jsfiddle demo：sfiddle.net/8p33qh9h

相关问题
最新问题