Venture Theme - Drop down menus activate on hover instead of click?

Aaron54
Tourist
13 0 2

Anyone know how to make it so your main menu drop down's activate on mouse hover instead of requiring a click like most websites?

Thank you.

Robert72
Shopify Partner
6 0 0

I'm also interested in implementing this on my site using the venture theme.

0 Likes
Jason
Shopify Expert
10275 144 1943

If you change the action from click to hover only what happens when a tablet or large screen touchscreen device uses your site? You're making the assumption that the user has a mouse (or pointer device) - which is not always the case.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Robert72
Shopify Partner
6 0 0

With superfish, touch devices are supported.

 

  • Supports touch devices. On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal. Note that you currently need to include Brian Cherne’s hoverIntent plugin to support certain Android browsers' and IE10's touch interaction. This may change.
0 Likes
Oswald
Shopify Staff
Shopify Staff
88 0 25

Hey Aaron,

This is Oswald, a Guru here at Shopify!

Changing the menu to hover touch screen devices will not work properly as you will not be able to hover of the menu items.

If you do decide to try to use the Superfish mentioned above by Robert, here you will find some information that will help you get started with the plugin.

Hope the information above helps! If you have any other questions, feel free to reach out to the Guru team. :)

Cheers!

Oswald | Shopify Guru

NicolasMetz
New Member
8 0 0

Hey Oswald!

Are there also other options to get the hover over done besides this plugin?

Maybe you can also help me here, really frustruating :/

https://ecommerce.shopify.com/c/ecommerce-design/t/thumbnails-drop-down-menu-venture-theme-387158

 

thansk,

Nico

0 Likes
Steven_Chu
Shopify Expert
12 0 3

Go to theme.js, and find the meganav section. swap out "click" for "mouseover":


window.Meganav = (function() {
  var Meganav = function(options) {
    this.cache = {
      $document: $(document),
      $page: $('.page-element')
    };

    var defaults = {
      $meganavs: $('.meganav'),
      $meganavToggle: $('.meganav-toggle'),
      isOpen: false,
      preventDuplicates: false,
      closeOnPageClick: false,
      activeClass: 'meganav--active',
      noAnimationClass: 'meganav--no-animation'
    };

    this.config = $.extend(defaults, options);
    this.init();
  };

  Meganav.prototype.init = function() {
    var $openBtn = this.config.$meganavToggle;

    // Add aria controls
    $openBtn.attr('aria-expanded', 'false');
    $openBtn.each(function(i, el) {
      var $el = $(el);
      $el.attr('aria-controls', $el.attr('data-aria-controls'));
    });

    $openBtn.on('mouseover', $.proxy(this.requestMeganav, this));
  };

  Meganav.prototype.requestMeganav = function(evt) {
    // Prevent following href if link is clicked
    if (evt) {
      evt.preventDefault();
    }

    // Without this, the meganav opens, the click event bubbles up to
    // theme.cache.$page which closes the drawer.
    if (evt && evt.stopPropagation) {
      evt.stopPropagation();
    }

    var $el = $(evt.currentTarget);
    var $targetedMeganav = $('#' + $el.attr('aria-controls'));
    var anotherNavIsOpen = this.config.isOpen;

    // Navigate to link href or close menu if already active
    if ($el.hasClass(this.config.activeClass)) {
      if ($el.is('a')) {
        window.location = $el.attr('href');
        return;
      } else {
        // It is active but has no link. Close just that meganav
        return this.close(evt, $el);
      }
    }

    // If true, don't let multiple meganavs be open simultaneously
    if (this.config.preventDuplicates) {
      this.close();
    }

    // Set active class on toggle button/link
    $el.addClass(this.config.activeClass).attr('aria-expanded', 'true');

    // Show targeted nav, letting it know whether another meganav is already open
    this.open($targetedMeganav, anotherNavIsOpen);

    // Setup event handlers when meganav is open
    this.bindEvents();
    this.config.isOpen = true;
  };

  Meganav.prototype.open = function($target, noAnimation) {
    $target.addClass(this.config.activeClass);

    // Add class to override animation - CSS determined
    if (noAnimation) {
      $target.addClass(this.config.noAnimationClass);
    }
  };

  Meganav.prototype.close = function(evt, $target) {
    if (this.config.preventDuplicates) {
      // Close all meganavs
      this.config.$meganavs.removeClass([this.config.activeClass, this.config.noAnimationClass].join(' '));
      this.config.$meganavToggle.removeClass(this.config.activeClass).attr('aria-expanded', 'false');
    } else {
      // Close targeted nav
      var $targetedMeganav = $('#' + $target.attr('aria-controls'));
      $targetedMeganav.removeClass([this.config.activeClass, this.config.noAnimationClass].join(' '));
      $target.removeClass(this.config.activeClass).attr('aria-expanded', 'false');
    }

    // Remove event listeners
    this.unbindEvents();
    this.config.isOpen = false;
  };

  Meganav.prototype.bindEvents = function() {
    if (!this.config.closeOnPageClick) {
      return;
    }

    // Clicking away from the meganav will close it
    this.cache.$page.on('mouseover.meganav', $.proxy(this.close, this));

    // Exception to above: clicking anywhere on the meganav will NOT close it
    this.config.$meganavs.on('mouseover.meganav', function(evt) {
      evt.stopImmediatePropagation();
    });

    // Pressing escape closes meganav and focuses the target parent link
    this.cache.$document.on('keyup.meganav', $.proxy(function(evt) {
      if (evt.keyCode === 27) {
        this.config.$meganavToggle.filter('.' + this.config.activeClass).focus();
        this.close();
      }
    }, this));
  };

  Meganav.prototype.unbindEvents = function() {
    if (!this.config.closeOnPageClick) {
      return;
    }

    this.cache.$page.off('.meganav');
    this.config.$meganavs.off('.meganav');
    this.cache.$document.off('.meganav');
  };

  return Meganav;
})();

 

Let me know if you have any questions. Venture is my favorite theme to build off... speaking as a Shopify Expert / Partner, FYI!

Have a great day!

Stores I built: Flora1761.com (highly art-directed Nail Lacquer boutique) / Marissa-Webb.com (NYC SoHo Fashion Brand) / ViraniJewelers.com (high-volume product jewelry website) / Chuubie.com (my personal testing ground, using Shopify CMS as a stock photography sales platform)
0 Likes
Josh_Frost
New Member
1 0 1

Hi Steven, 

I have just put this code into my website. It is exactly what I am looking for, however every time I hover my mouse over the menu items it directs me straight into that page and takes me away from the menu. Is there anything that could be adjusted in the code to prevent this?

Dhaim_Khan
New Member
2 0 0

hi Josh , I just looked at your website . How did you manage to fix this particular issue on your website? I am having the same problems.

 

0 Likes
Robert72
Shopify Partner
6 0 0

I'd also be interested in preventing further mouseovers from acting as a click once the menu is expanded on hover.

0 Likes