rakuishi.com

JavaScript

[jQuery] スマホサイトによくあるクリックで展開するメニューを実装する

こんな感じのスマホサイトによくあるクリックで展開するメニューを実装してみました。左に俗にいうハンバーガーボタン、右に検索ボタンを設置したものを想定しました。

実装

html

タグマークアップはこんな感じです。次の記事の方法を使って、左右にアイコンを配置しています。この方法だとシンプルに実装できます。→ 「次に進む/前に戻る」で CSS の記述量が減るテクニック · rakuishi.com

<div class="container">
  <header>
    <div class="menu"><img src="images/menu.png" width="20" height="20" /></div>
    <div class="search">
      <img src="images/search.png" width="20" height="20" />
    </div>
  </header>

  <div class="js-menu"></div>
  <div class="js-search"></div>
</div>

CSS

今回の実装では、展開されるメニュー js-* である要素に position: absolute を指定して、オーバーレイする形をとっています。

というのは、オーバーレイではなくて単に表示/非表示した場合、その下に存在する要素(例えば、記事)を押し出したり、引き出したりすることになるのですが、その要素量によっては、アニメーションがガタつくことがあります。

よって、ここでは負担の少ないオーバーレイという形を取ります。

.js-menu,
.js-search {
  position: absolute;
  top: 44px;
  width: 100%;
  height: 150px;
}

JavaScript

要となる jQuery Script は、以下のように記述しました。わかりやすさのために、読み込み時に hide() を呼ぶようにしていますが、CSS に display: none を書くほうがパフォーマンスは良いと思います。

<script
  type="text/javascript"
  src="http://code.jquery.com/jquery-2.1.1.min.js"
></script>
<script type="text/javascript">
  $(function () {
    var menu = $("div.js-menu");
    var search = $("div.js-search");
    menu.hide();
    search.hide();
    $("div.menu").on("click", { a: menu, b: search }, slide);
    $("div.search").on("click", { a: search, b: menu }, slide);
    function slide(event) {
      if (event.data.a.css("display") === "none") {
        event.data.a.slideDown(250);
        event.data.b.slideUp(250);
      } else {
        event.data.a.slideUp(250);
      }
    }
  });
</script>

参考

現場でかならず使われている jQueryデザインのメソッド現場でかならず使われている jQueryデザインのメソッド