【jQuery】サイド固定の縦100%と、Amazonライクなマウスオーバーメガメニューを作りました [スマホ未対応 / IE8対応]

150816_001

ふと、「Amazonのメガメニューはどの程度のコードで作れるだろう?」と思い、作ってみました。タッチデバイスで使えないという問題点はありますが、簡素なコードで作れたので紹介します。
ついでに、固定サイドメガメニューも作りました。

目次

検証済みブラウザとOS

  • IE 8~ ※一部CSSはIE8不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • 無駄なアニメーションを排除しているので、直感的な操作を期待できる
  • マウスを置くコンテンツの範囲が広く、訪問者のストレスを小さくする
  • 多数のカテゴリを省スペースでまとめられる
出来ないこと
タッチデバイスでの動作

 

要点とコード

code

  • jQueryは普通のコード
  • 子セレクタを使い、直下のリストタグを表示・非表示操作

サイド固定

  • トリガーは .open
  • position: fixed; で固定させ、margin-left で強引に表示
  • 階層を管理しやすいように、level-00 とクラスを付与して切り分け

 

Amazonライク

  • こちらも同様に、level-00 とクラスを付与して階層を管理
  • メニュー部の level-02 はwidth未指定、コンテンツ部の level-03 はwidthを指定
  • hide() メソッドは、overflow: hidden; をインラインCSSで追加するため、絶対配置をネストすると、二階層以下は非表示になる。
    解決策として、level-01 をスライドさせる際に、最下層の level-02 に overflow: visible; を追加して、無理やり表示させている。

 

カスタマイズ

customize

メニュー部分を画像にしたい
時間と労力の無駄でしかないので、画像はやめるよう先方を説得しましょう。

 

問題点

PC限定
レスポンシブデザインではない案件の場合、スマホでPC表示させると以下になるので要注意。

  • iOSで動作はするが元に戻せない
  • Androidでは動作すらしない

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 45,345
    • このエントリーをはてなブックマークに追加