スクロールできちゃう!横からスライドして出てくるドロワーメニューサンプル

jQueryとcssで、スマホでスクロールできちゃう横からスライドして出てくるドロワーメニューのサンプルを自作してみました。

ドロワーメニューの作り方
共通のcss
ドロワーメニューの開閉ボタンの作成
1.右から出てくる
2.左から出てくる
3.上から出てくる
4.マウスオーバーで出てくる

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

ナビゲーションメニュー関連記事

ドロワーメニューの作り方

ブラウザで見える範囲の外にメニューを隠しておいて、ボタンを押したら表示するってだけです。
今回はドロワーメニュー内の要素が多くてはみ出す場合を想定してドロワーメニューをスクロールできるようにしています。

ドロワーメニューの使い道はスマホサイトでも多いと思うので1～3はスマホ用サンプルも用意してみました！

共通のcss

css

.ul_open_h,
.ul_open_v{
    background: gray;
    color: #fff;
    margin: 0;
    padding: 0;
    list-style: none;
    top: 0;
}


.ul_open_h{ 
    height: 100%;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    overflow-y: scroll;
    position: fixed;
}

.ul_open_h li{
    padding: 10px;
    width: 150px;
}

.ul_open_v{
    position: absolute;
    height: 100%;
}

.ul_open_v li{
    padding: 10px;
    width: 150px;
}

.ul_open_hと.ul_open_hの違いはvが縦から、hが横から出てくるドロワーメニューってだけです。
デザインのためにクラスで分けてあります。

ドロワーメニューの開閉ボタンの作成

ボタンのcssはハンバーガーボタンが開閉状態に合わせてくるくる変化するものを使っています。
詳細は下記からどうぞ！

jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

cssでシュッと動かす動きをつけて、jQueryで開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法ナビゲーションメニュー関連記事 ...

1.右から出てくる

html

<ul class="ul_open_h open-1"></ul>
<span class="btn btn-1"><span></span></span>

css

.open-1{
    right : -100%;
}
.open-1.active{
    right : 0px;
}

.move-1.on.btn{
    position: fixed;
    right: 25px;
    top: 10px;
}

$('.btn-1').click(function () {
    $('.open-1').toggleClass('active');
    $(this).toggleClass('on');
    $(this).toggleClass('move-1');
});

まず、cssでドロワーメニューを右側の見えない領域right : -100%;の位置に隠します。
ボタンが押されると、ulにクラスactiveが足されるのでドロワーメニューのcssがright : 0;の位置に移動します。

もう一度ボタンを押すとulからクラスactiveが外れるので画面外の元の位置に戻ります。

閉じるボタンの位置はcssで調節してください。

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

2.左から出てくる

html

<ul class="ul_open_h open-2"></ul>
<span class="btn btn-2"><span></span></span>

css

.open-2{
    left : -100%;
}
.open-2.active{
    left : 0px;
}

.move-2.on.btn{
    position: fixed;
    left: 100px;
    top: 10px;
}

$('.btn-2').click(function () {
    $('.open-2').toggleClass('active');
    $(this).toggleClass('on');
    $(this).toggleClass('move-2');
});

1.右から出てくるをcss部分を左にしただけです。

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

3.上から出てくる

html

<div class="scroll_parent">
    <ul class="ul_open_v open-3"></ul>
</div>

css

.scroll_parent{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
}

.ul_open_v{
    position: absolute;
    height: 100%;
}

.open-3{
    width: 100%;
    height: auto;
}

.open-3 li{
    padding: 10px;
    text-align: center;
    width: 100%;
}

.move-3.on.btn{
    position: fixed;
    right: 20%;
    top: 10px;
}

$('.btn-3').click(function () {
    $('.scroll_parent').slideToggle('slow');
    $(this).toggleClass('on');
    $(this).toggleClass('move-3');
});

今回は親要素を作ってその中にulを入れています。
親要素を高さ100%指定、position: fixed;で固定し、ulはposition: absolute;で中に入れます。
最後にoverflow-y: scroll;ではみ出た部分をスクロールさせます。
そうすると横幅がスクロールバーの分だけ枠外にはみ出るのでoverflow-x: hidden;で整えます。

親要素にcssでtransitionをつけてjQueryで.slideToggle(‘slow’)をすると気持ち悪い動きになるので気を付けましょう。原因がわからず結構はまりました！

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

4.マウスオーバーで出てくる

html

<ul class="ul_open_h open-4"></ul>

css

.open-4{
    position: absolute;
    width: 150px;
    overflow: visible;
}

.open-4 li{
    position: relative;
    right : 0px;
    background: gray;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.open-4 li:hover{
    right : 100px;
}

本当は最初から右端に出しておきたかったんですが、1.のドロワーメニューと重なるのでボタンで開閉式になっています。
これはマウスオーバーのみで完結できるのでjsは使ってません。

基本的な構造は1.と同じです！

すごく説明を省略したのでわからなかったらすみません！
サンプルコードをコピペだけで使えるはずなので試してみてくださいね！