Create your Amazon-like navigation menu

Earlier on Habré already told about the mysterious menu. The invention is truly ingenious and useful. I am sure each of you would like to modify the menu on your site in the same way.

How to do it?

It is assumed that jQuery is connected to your site. If not, you can rework the script for pure JS. Github already has a plug-in for it, written by Ben Kamsom. But it seemed to me too cumbersome and not very suitable for the current menu. Therefore, it was decided to write your own script.

Immediately I can say that this is not the invention of the bicycle, but rather a quick guide to creating the Amazon menu. Further more detailed information about the task and its solution:
')
So, there is a menu with a fixed width:



This greatly simplifies the task. For each cursor position, a triangle is computed with vertices in the upper and lower corners of the list and the cursor. If the cursor falls on the area of ​​another element in the blue triangle, the already open submenu will change, but with a delay that will allow the user to drag the cursor to the submenu area. Next, use the known coordinates. Namely: the lower peaks. All we need to calculate is the current position of the cursor. In addition, you need to remember the previous value of the position of the cursor. This is enough theory, then - more practice.

As it was before

Menu layout:

<div class="menu-all"> <ul> <li><a>Caption</a> <div class="dropdown-menu-main">some content</div> </li> <li><a>Caption 2</a> <div class="dropdown-menu-main">some content 2</div> </li> </ul> </div> 

Handler for the menu:

  $(".menu-all > ul > li").hover(function(){ $(this).addClass("active").find("div.dropdown-menu-main").show(); $("#over-hidden").addClass("over"); }, function(){ $(this).removeClass("active").find("div.dropdown-menu-main").hide(); $("#over-hidden").removeClass("over"); }); 

The result is:



Ok, correct the situation.

Layout, naturally remains the same, but would not attract layout makers. Just modify the handler:

  //       var x2 = 0; var y2 = 0; //      var x1 = 0; var y1 = 70; var x3 = 900; var y3 = 70; //     var in_delta = false; //         false $('.dropdown-menu-main').mouseenter(function() { in_delta = false; }); //       $('.menu-all > ul > li').mousemove(function(e) { var parentOffset = $(this).parent().offset(); //     var x0 = e.pageX - parentOffset.left; var y0 = e.pageY - parentOffset.top; //             var z1 = (x1 - x0) * (y2 - y1) - (x2 - x1) * (y1 - y0); var z2 = (x2 - x0) * (y3 - y2) - (x3 - x2) * (y2 - y0); var z3 = (x3 - x0) * (y1 - y3) - (x1 - x3) * (y3 - y0); if ((z1 > 0 && z2 > 0 && z3 > 0) || (z1 < 0 && z2 < 0 && z3 < 0)) { in_delta = true; } else { //         $('.menu-all > ul > li.active').removeClass('active').find("div.dropdown-menu-main").hide(); $(this).addClass("active").find("div.dropdown-menu-main").show(); $("#over-hidden").addClass("over"); //        in_delta = false; } //        "  "    x2 = e.pageX - parentOffset.left; y2 = e.pageY - parentOffset.top; }).mouseleave(function() { if (!in_delta) { //      $(this).removeClass("active").find("div.dropdown-menu-main").hide(); $("#over-hidden").removeClass("over"); } }); 

That's all.

Good luck with playback!