CSSやjQueryを使ったページスライド

ページスライドとは、表示されている要素を左右にスライドさせて非表示になっている要素を表示させるためのUIです。画面遷移をする場合やメニューなどを表示させる場合に用いられたりすることが多いです。

ページスライドの作り方

要素を横に移動させてメニューを表示させる簡単なページスライドの作り方を見ていきます。まずは、HTMLを以下のように作ります。

<ul id="navi">
  <li>ナビゲーション1</li>
  <li>ナビゲーション2</li>
  ～中略～
  <li>ナビゲーション8</li>
</ul>
<div id="wrap">
  <div id="menu-btn">MENU</div>
  <div id="container">
  ～中略～
  </div>
</div>

続いて、CSSでスライドのアニメーションをつけていきます。

#navi {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  visibility: hidden;
  transition: visibility .2s;
}
#navi.open {
  visibility: visible;
}
#navi.open + #wrap {
  transform: translateX(250px);
}
#wrap {
  position: relative;
  transform: translateX(0);
  transition: transform ease .2s;
}

最後に、jQueryで動きを制御させます。

メニューボタンだけを使う場合

まずは、メニューボタンをタップすることでスライドさせる場合の動かし方を見ていきます。

$(function(){
  $("#menu-btn").click(function() {
    $("#navi").toggleClass("open");
  });
});

この場合は、メニューボタンをクリックしたら「#navi」要素に「open」というクラスを付与または削除する命令になります。これにより、クラス「open」がついたときは「#wrap」要素を「translateX()」で250px横にずらし、「#navi」要素を「visible」で表示させています。

コンテンツ全体をタップ領域にする場合

メニューボタンだけでなく、コンテンツのどの部分をタップしてもスライドが閉じるようにする場合は以下のようにします。

$(function(){
  $("#menu-btn").click(function() {
    $("#navi").addClass("open");
    $("#close").css("height" , $("#wrap").height());
  });
  $("#close").click(function() {
    $("#navi").removeClass("open");
    $("#close").removeAttr("style");
  });
});

まず、メニューボタンをクリックしたら「#navi」要素にクラス「open」を付与し、「#close」要素にコンテンツ全体の高さを持たせます。「.height()」を使ってコンテンツ全体である「#wrap」の高さを取得することができます。そして、取得した高さを「.css()」を使って「#close」要素にスタイルとして指定をします。
あとは、「#close」要素をクリックしたら「#navi」要素からクラス「open」を削除し、「.removeAttr()」を使って「#close」要素からスタイルをリセットするようにします。

CSSの部分には以下を追加して閉じるエリアに関する指定をします。

#close {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
}
#navi.open + #wrap + #close {
  display: block;
  transform: translateX(250px);
}

そして、HTMLの</body>の直前に「<div id=”close”></div>」を追加して、閉じるエリアを用意します。

ちなみに、変数を使用してスクリプトを記述すると以下のようになります。変数を使用した方が処理時間も抑えられたりすることもあるので良いかもしれません。

$(function(){
  var menuNav = $("#navi");
  var closeArea = $("#close");
  $("#menu-btn").click(function() {
    menuNav.addClass("open");
    closeArea.css("height" , $("#wrap").height());
  });
  closeArea.click(function() {
    menuNav.removeClass("open");
    closeArea.removeAttr("style");
  });
});