Imitation Amazon left navigation (well-designed 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

It is possible for users to do two things on the left navigation bar:

1. Toggle Navigation tab
2. Move the mouse from the tag into the right side of the content

To determine what the user is doing is based on the user's mouse track, if the mouse through the green area, it is likely to do is 2 of the operation, otherwise it is certainly to do 1 of the operation.

So we have to do is: in the user's mouse through the green area, the mouse through the Navigation tab (that is, the green area of the Navigation tab), not immediately jump, but delay a period of time to jump, such as 300ms.

After 300ms, if the mouse leaves the green area, it proves that the user wants to go to the right side of the content, at this time we do not tag jump.

Children's shoes interested in specific implementation can look at the source code, but also welcome criticism

/** * 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.classna Me;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). ADDCL (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 * @ver Sion 1.0 * * Licensed under the MIT License. */(Function ($, window, undefined) {var start, end, slope, Liveslope, target, ClassName, index, Reg, ret, paths = [];funct Ion 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 = f Alse;} 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))




Imitation Amazon left navigation (well-designed human-computer interaction)