Blog

HOME > Web > JQuery > 【jQuery】プラグインを使わずにスライドメニューを実装

【jQuery】プラグインを使わずにスライドメニューを実装

2018/01/30

JQuery css

備忘録です。

参考サイト
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

基本

HTML

<!-- スライドメニュー部分-->
<nav id="slide_menu">
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
    </ul>
</nav>
 
<!--メニューを出すボタン-->
<button id="button"><i class="fa fa-bars"></i> Menu</button>

CSS body

body {
    position: relative;
    left: 0;
    overflow-x: hidden;
}

CSS スライド部分

#slide_menu{
    position: fixed;
    top: 0;
    left: -240px;
    width: 240px;
    height: 100%;
    background: #E87272;
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var menu = $('#slide_menu'), // スライドインするメニューを指定
    menuBtn = $('#button'), // メニューボタンを指定
    body = $(document.body),     
    menuWidth = menu.outerWidth();                
     
    // メニューボタンをクリックした時の動き
    menuBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
        if(body.hasClass('open')){
            // open クラスが body についていたらメニューをスライドインする
            body.animate({'left' : menuWidth }, 300);            
            menu.animate({'left' : 0 }, 300);                    
        } else {
            // open クラスが body についていなかったらスライドアウトする
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
});    
</script>

応用

jQuery メニューの開閉でボタン画像を切り替える場合にはbodyにcssを追加します。

<script>
$(function(){
var menu = $('#slide_menu'), // スライドインするメニューを指定
    menuBtn = $('#button'), // メニューボタンを指定
    body = $(document.body),     
    menuWidth = menu.outerWidth();                
     
    // メニューボタンをクリックした時の動き
    menuBtn.on('click', function(){
    // body に open クラスを付与する
    body.toggleClass('open');
        if(body.hasClass('open')){
            $('body').removeClass('close');
            // open クラスが body についていたらメニューをスライドインする
            body.animate({'left' : menuWidth }, 300);            
            menu.animate({'left' : 0 }, 300);                    
        } else {
            $('body').addClass('close');
            // open クラスが body についていなかったらスライドアウトする
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
});    
</script>

メニューが開いている時にコンテンツ部分をクリックしても閉じることができるようにする

HTML
まず、HTML のどこかに div.layer を追加します。

<body>
<div class="layer"></div>
<div class="container">
：
略

CSS

.layer{
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
body.open{
    position: fixed;
}

jQuery

$(function(){
var menu = $('#slide_menu'),
    menuBtn = $('#button'),
    body = $(document.body),
    // .layer もオブジェクト化    
    layer = $('.layer'),
    menuWidth = menu.outerWidth();                
         
    menuBtn.on('click', function(){
    body.toggleClass('open');
        if(body.hasClass('open')){
            // css で非表示にしていた .layer を表示
            $(".layer").show();
            body.animate({'left' : menuWidth }, 300);
            menu.animate({'left' : 0 }, 300);                    
        } else {
            // .layer を非表示
            $(".layer").hide();
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);            
        }             
    });
    // .layer をクリック時にもメニューを閉じる
    layer.on('click', function(){
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300).removeClass('open');
            layer.hide();
    });
});

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ