これは面白い。Amazonのメニュー表示の仕組みをjQueryで実装「jQuery-menu-aim」
jQuery-menu-aimはAmazonの右上メニューの動作を真似たjQueryライブラリです。
このソフトウェアを見てはじめて気がついたのですが、Amazon.(co.jp|com)の左上にあるメニューはとても面白い動きをしています。一階層目のメニューはマウスオーバーで二階層目の内容がリアルタイムに反映されるのですが、二階層メニューにマウスポインタを動かす際に多少別なメニューに被ったとしても内容が変わりません。それをjQueryで実装したのがjQuery-menu-aimです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.35.26.1363150437.png)
クリックでメニューを表示。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.35.29.1363150441.png)
マウスを下に移動すると右側に項目を表示します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.35.32.1363150444.png)
反応はとてもいいです。
通常であれば二階層目の表示反映タイミングを遅らせるようにするか、マウスの動きに過敏に反応して二階層目に移行したら別なメニューの内容を表示してしまった、なんてことになりかねません。縦と横の動きをうまくキャッチすることで実現できているのでしょう。非常に面白いソフトウェアです。
jQuery-menu-aimはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
Amazonは非常に面白い技術、デザイン要素が固まったサービスです。ECサイトの多くはAmazonからヒントを得ていたり、AWSと類似のサービスを立ち上げたりしています。Amazonによってサービスの変更を余儀なくされた企業も数多いことでしょう。
しかしAmazonの模倣をしても殆どうまくいかないことが多いです。あのWebデザインはAmazonだからこそ許されるもので、他で真似しても探しづらく、使いづらいシステムになってしまいます。ただ模倣するのではなく、そこから考え方やエッセンスを得ることで自社のサービスに活かすと言った考え方が必要です。