前天看到了一篇关于揭秘Amazon反应速度超快的下拉菜单 http://www.36kr.com/p/201751.html ，并说明其加载速度快的问题，还给出了一个三角形的算法，并给出了几个例子说明是多么的强大，刚刚想了想，其实本职并不是这个样子的 。
首先说一说技术上亚马逊是如何实现的。
当鼠标移动到主菜单 鼠标在主菜单上
html代码如下
<li class="nav_first nav_pop_li nav_cat nav_active nav_hover" id="nav_cat_0"><a href="/Kindle%E7%94%B5%E5%AD%90%E4%B9%A6/b/ref=sa_menu_top_kindle?ie=UTF8&node=116169071" class="nav_a">Kindle</a></li>
普通状态的HTML代码
<li class="nav_pop_li nav_cat" id="nav_cat_1"><a href="/%E5%9B%BE%E4%B9%A6/b/ref=sa_menu_top_book?ie=UTF8&node=658390051" class="nav_a">图书</a></li>
当鼠标移动到子菜单的时候
<li class="nav_first nav_pop_li nav_cat nav_active" id="nav_cat_0"><a href="/Kindle%E7%94%B5%E5%AD%90%E4%B9%A6/b/ref=sa_menu_top_kindle?ie=UTF8&node=116169071" class="nav_a">Kindle</a></li>
对比一下和两个class有关
nav_active 表示当前选择的菜单的样式
nav_hover表示鼠标是否在当前菜单上
然后我们看看子菜单的代码，采用了display的属性来显示和隐藏子菜单的内容。这是不是和我们正常实现的菜单是一样的呢。大家可以看看博客园首页的菜单切换体会一下。
为什么会感觉流程呢，亚马逊首页的二级菜单用了一个id为nav_subcats_wrap的div来容纳上面如图的代码
<div id="nav_subcats_wrap" class="nav_browse_wrap" style="display: block;">(子菜单内容) </div>
而这些子菜单所在的容器在没有离开整个主菜单和子菜单所在的区域时不会像我们平时实现的菜单消失掉 。这和我们先关闭掉一个菜单然后在打开一个菜单的区别就是不会晃眼。这就和chrome吧加载进度圈的旋转速度比firefox的快，显得浏览速度快是一个道理。
在主菜单切换的时候采用了这样一个三角形的切换代码。这个三角形的主要功能就是在选择子菜单的时候不用平移到子菜单在移动到要选择的位置。使整个二级菜单的选择减少大多数的二级菜单选择的误操作。
好了总结一下：
1.在菜单中使用了一个小技巧，当进入菜单的时候，主菜单打开并在子菜单显示主菜单的内容，在切换菜单时，子菜单的主div并不关闭，只切换菜单的显示和隐藏，这样切换，不会产生菜单晃眼的感觉，而且速度很快 。
2.使用了三角形的区域判断，在从主菜单进入子菜单选择的时候，极大的减少了子菜单的误切换。用户体验是没得说的。
ps. 发现亚马逊的首页在浏览器显示不下的时候菜单会收缩起来，以让主要的内容显示出来，看来用户体验总是在细微之处体现出差距。
作者：张巍
出处：http://ac1985482.cnblogs.com/
本文版权归作者和博客园共有，转载请注明出处，且在文章页面明显位置给出原文连接，谢谢合作