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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.