前天看到了一篇關於揭秘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. 發現亞馬遜的首頁在瀏覽器顯示不下的時候菜單會收縮起來，以讓主要的內容顯示出來，看來用戶體驗總是在細微之處體現出差距。