Like Amazon's left-side navigation (well-designed human-computer interaction), Amazon's Human-Computer Interaction

Like Amazon's left-side navigation (well-designed human-computer interaction), Amazon's Human-Computer Interaction

Demo: http://7li.github.io/jquery/jQuery-menu/index.html

Source: https://github.com/7LI/7li.github.io/tree/master/jquery/jQuery-menu

You can perform either of the following operations on the left-side Navigation Pane:

The basis for determining the operation that the user is performing is the user's mouse track. If the mouse goes through the green area, it is very likely that the operation is 2; otherwise, the operation is certainly 1.

So what we need to do is: when the user's mouse goes through the green area, the navigation label that the mouse passes through (that is, the navigation label in the green area) does not jump immediately, instead, it will be delayed for a period of time before the jump, such as 300 ms.

After ms, if the mouse leaves the green area, it indicates that the user wants to enter the content on the right side. At this time, we will not jump to the tab.

If you are interested in the specific implementation, you can check the source code. You are also welcome to criticize and correct it.

/** * jQuery Menu plugin *  * @author lyz * @email 702368372#qq.com * @version 1.0 *  * Licensed under the MIT License. */(function ($, window, undefined) {var menu, panels, target, className, index, navOn, panelOn, me, i, reg;function Menu (config) {me = this;if (me == $) {return new Menu(config);}var DEFAULT = {menu: 'menu',nav: 'menu-nav',navs: 'menu-nav-item',panels: 'menu-panel-item',navHover: 'menu-nav-item-hover',navOn: 'menu-nav-item-on',panelOn: 'menu-panel-item-on',delay: 300,plugins: []}me.config = $.extend(DEFAULT, config, {});me.menu = $('.' + me.config.menu);me.nav = $('.' + me.config.nav);me.navs = $('.' + me.config.navs);me.panels = $('.' + me.config.panels);me.menu.mouseover (function (e) {target = e.target;className = target.className;target = $(target);index = target.index();reg = new RegExp(me.config.navs);if (reg.test(className)) {me.navSwitchTo(index);me.panelSwitchTo(index);}})for (i = 0; i < me.config.plugins.length; i++) {me.config.plugins[i].init(me);}}Menu.prototype.navAttemptSwitchTo = function (index) {me = this;me.navs.removeClass(me.config.navHover)       .eq(index).addClass(me.config.navHover);}Menu.prototype.navSwitchTo = function (index) {me = this;me.navs.removeClass(me.config.navOn + ' ' + me.config.navHover)       .eq(index).addClass(me.config.navOn);}Menu.prototype.panelSwitchTo = function (index) {me = this;clearTimeout(me.panelTimer);me.panels.removeClass(me.config.panelOn)         .eq(index).addClass(me.config.panelOn);me.navSwitchTo(index);};Menu.prototype.panelAttemptSwitchTo = function (index) {me = this;clearTimeout(me.panelTimer);me.panelTimer = setTimeout( function () {me.panelSwitchTo(index);}, me.config.delay)me.navAttemptSwitchTo(index);};$.Menu = Menu;} (jQuery, this, undefined))
/** * Plugin for jQuery-menu which acts similar to amazon's leftside nav *  * @author lyz * @email 702368372#qq.com * @version 1.0 *  * Licensed under the MIT License. */(function ($, window, undefined) {var start, end, slope, liveSlope, target, className, index, reg, ret, paths = [];function MenuAmazing () {me = this;if (me == $) {return new MenuAmazing();}}/** * Init plugin * @param  {object} host  */MenuAmazing.prototype.init = function (host) {slope = host.nav.outerHeight() / host.nav.outerWidth();host.menu.unbind('mouseover'); host.menu.mouseover( function (e) {target = e.target;className = target.className;target = $(target);index = target.index();reg = new RegExp(host.config.navs);if (reg.test(className)) {if (isSwitch()) {host.panelSwitchTo(index);} else {host.panelAttemptSwitchTo(index);}}});host.nav.mouseleave( function () {clearTimeout(host.panelTimer);host.navs.removeClass(host.config.navHover);})}/** * Is swiching immediately or lazily * @return {Boolean} yes or not */function isSwitch () {start = paths[0] || {x: 0, y: 0};end = paths[paths.length-1] || {x: 0, y: 0};liveSlope = Math.abs(end.y - start.y) / Math.abs(end.x - start.x);inTriangle = end.x > start.x; // In the first quadrant or the forth quadrantif (!inTriangle && liveSlope > slope) {ret = true;} else {ret = false;}return ret;}/** * Mark mouse path */$(document).mousemove (function (e) {if (paths.length == 3) {paths.shift();}paths.push({x: e.pageX, y: e.pageY});})$.MenuAmazing = MenuAmazing;} (jQuery, this, undefined))