jQuery-メニューやコンテンツをスライドさせて表示する

jQueryのクリックやマウスオーバーで、コンテンツをスライドさせて表示する方法です。

ちょっとしたtipsを表示させる場合なんかにも、動きがついてかわいいかもですね。
IE8↑で動作確認しています。
jQueryライブラリの読み込みだけで、その他のプラグイン等は使用していません。

左のクリックバージョンはスマホでも一応動作しますが、mmenuプラグインという素敵なものがあるので、こちらの方が安定しているかもしれません。

デモページ

右からマウスオーバーでスライドさせる

CSS

スライドさせる要素の親要素に対し、下記のようなスタイルを付与します。
今回はposition:fixed;で絶対配置にしていますが、相対配置でもOKです。
横幅を指定し、right: -140px; で初期位置を指定しています。この場合は-140px分右ヘ移動するので、40px分だけ画面に出ているということになります。
z-indexの値は、スライドさせるコンテンツが一番上になるように指定しましょう。

#slideR {
  z-index: 99;
  cursor: pointer;
  position: fixed;
  top: 40%;
  right: -140px;
  background: #0DCEA8;
  width: 180px;
  color: #fff;
  font-size: 16px;
}

JavaScript(jQuery)

animate関数を使い、マウスオーバーしたら右のmarginを140pxにし、マウスが外れたら0になるようにしています。
5行目のid名はスライドさせたい要素のidを指定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
//マウスオーバーで表示
$(function() {
      $('#slideR').hover(
      function(){
        $(this).animate({'marginRight':'140px'},500);
      },
      function () {
        $(this).animate({'marginRight':'0'},500);
      }
    );
});

右からクリックでスライドさ

html

スライドしたい要素の親要素に任意のidを指定し、クラス名に「off」と指定します。
このクラス名はjQueryでスライドが非表示になっていることを判定するためのクラス名です。
更に今回はコンテンツの中身が縦に長かった場合はスクロールバーを表示させるようにしているので、スクロールしたい要素をslide-innerというクラス名をつけて囲っています。

<div id="slideL" class="off">
    <div class="slide-inner">
        ～～～～
    </div>
</div>

CSS

前半の記述は左右の初期位置が違うだけでほぼ同じです。
後半はコンテンツの中身のスクロールバーを表示させるための記述です。

#slideL {
  z-index:100;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: -400px;
  width: 400px;
  height: auto;
  padding: 0 40px 0 0;
  background: #999;
}
#slideL .slide-inner {
  overflow: auto;
  overflow-x: hidden;
  background: #ddd;
}

JavaScript(jQuery)

クリックした場合はマウスオーバーの時よりも少し複雑です。
toggle関数を使えば上記と同じように出来るのですが、この関数はjQuery1.9から非推奨となっているので、今回はclick関数＋条件分岐で作りました。

クリックした時にクラス名に「off」があったら、
・左のmarginを400pxにする。
・ついでにクラス「off」を外して「on」を追加する。
↓
コンテンツが表示される。
↓
クリックした時にクラス名に「off」がなかったら、
・クラスに「off」を追加する。
・左のmarginを0pxにしてスライドを非表示にする。

やっていることは上記のような感じです。

//クリックで表示
$('#slideL').on('click',function(){
  if($('#slideL').hasClass('off')){
    $('#slideL').removeClass('off');
    $(this).animate({'marginLeft':'400px'},300).addClass('on');
  }else{
    $('#slideL').addClass('off');
    $(this).animate({'marginLeft':'0px'},300);
  }
});

最後に、スクロールバーを表示するために、ウィンドウの高さを取得し、中身の要素にその高さを渡します。
（高さを指定しないと、バーが出てくれないのです。。）

//左のコンテンツ用にウィンドウの高さを取得
$(document).ready(function(){
  fit();
  $(window).resize(function(){
    fit();
  })
  function fit(){
    var h = $(window).height();
    $('.slide-inner').css("height",h);
  }
});

デモページ

RELATED POSTS