Amazonの「カテゴリーからさがす」メニューがかっちょいー

Amazonの「カテゴリーからさがす」メニューかっちょいーよね。

ちょっとだけはみ出てるの。

右っちょのほー。

雑誌的なセンスがすげーわ。

どうやって作ってんのか、HTMLを見てみると、

<div id="nav_subcats_5" data-nav-promo-id="books-comics-magazines" class="nav_browse_subcat nav_super_cat" style="display: none;">
  <img
    src="http://g-ec2.images-amazon.com/images/G/09/2013/student/flyout/15per_flyout._V358985769_.png"
    usemap="#nav_imgmap_books-comics-magazines"
    class="nav_browse_promo"
    style="bottom: -14px; right: -20px; width: 500px; height: 482px;">
  <ul class="nav_browse_ul nav_browse_cat_ul">
    <li class="nav_pop_li nav_browse_cat_head">本・コミック・雑誌</li>
    <li class="nav_first nav_subcat_link nav_pop_li">
      <a href="/%E6%9C%AC-%E5%92%8C%E6%9B%B8/b/ref=sa_menu_jb?ie=UTF8&amp;node=465392" class="nav_a nav_item">本</a>
    </li>
    <li class="nav_taglined nav_subcat_link nav_pop_li">
      <a href="/Kindle-%E3%82%AD%E3%83%B3%E3%83%89%E3%83%AB-%E9%9B%BB%E5%AD%90%E6%9B%B8%E7%B1%8D/b/ref=sa_menu_kbo?ie=UTF8&amp;node=2275256051" class="nav_a nav_item">Kindle本</a>
      <div class="nav_tag">電子書籍</div>
    </li>
    <li class="nav_taglined nav_subcat_link nav_pop_li">
      <a href="/%E6%B4%8B%E6%9B%B8-foreign-books-English-books/b/ref=sa_menu_fb?ie=UTF8&amp;node=52033011" class="nav_a nav_item">洋書</a>
      <div class="nav_tag">Foreign Language Books</div>
    </li>
    <li class="nav_subcat_link nav_pop_li">
      <a href="/%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF-%E3%82%A2%E3%83%8B%E3%83%A1-%E6%BC%AB%E7%94%BB-%E3%83%9E%E3%83%B3%E3%82%AC/b/ref=sa_menu_comic?ie=UTF8&amp;node=466280" class="nav_a nav_item">コミック</a>
    </li>
    <li class="nav_subcat_link nav_pop_li">
      <a href="/%E9%9B%91%E8%AA%8C/b/ref=sa_menu_mag?ie=UTF8&amp;node=13384021" class="nav_a nav_item">雑誌</a>
    </li>
    <li class="nav_subcat_link nav_pop_li">
      <a href="/%E4%B8%AD%E5%8F%A4%E6%9C%AC-%E5%8F%A4%E6%9B%B8-%E5%8F%A4%E6%9C%AC-%E5%B8%8C%E5%B0%91%E6%9C%AC/b/ref=sa_menu_ub?ie=UTF8&amp;node=255460011" class="nav_a nav_item">古本・古書</a>
    </li>
  </ul>
</div>

ってなってる。

どうやら、imgタグにスタイルを指定して、表示位置を微調整してるみたい。

img {
  bottom: -14px;
  right: -20px;
  width: 500px;
  height: 482px;
}

下方向に14px下げて、右方向に20pxずらしてる。

メニューに細やかなこだわりを見せてるあたり、さすがだなー。

そういや、 Nexus 7 出ましたね。

ASUS Nexus7 (2013) TABLET / ブラック ( Android / 7inch / APQ8064 / 2G / 16G / BT4 ) 並行輸入品