JSFiddle - React, Tailwind, and code Playground

by sachips

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="wrapper">
    <div id="contents">
        <header class="clearfix">
            <h1>仮ロゴ</h1>
            <div class="menu-switch"><i class="fa fa-bars fa-2x fa-border"></i></div>
        </header>
        <div id="main">
            <p>スマホサイトで見かけることが多い、ボタンを押すと横からメニューがスルッと引き出し（ドロワー）のように出現するメニューです。「ドロワーメニュー」と呼ばれます。</p>
            <p>今回は、少しのJavaScriptとcssで実現する方法です。</p>
        </div>
    </div>
    <div class="drawer">
        <ul>
            <li><a href="">ホーム</a></li>
            <li><a href="">サービス</a></li>
            <li><a href="">料金</a></li>
            <li><a href="">会社概要</a></li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
}
#contents {
    -webkit-transition: ease .3s;
    transition: ease .3s;
}
    #contents.cover {
        -webkit-transform: tranformslateX(-300px);
        transform: translateX(-300px);
    }
.drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
    -webkit-transition: ease .3s;
    transition: ease .3s;
}
    .drawer.active {
        -webkit-transform: tranformslateX(0);
        transform: translateX(0);
    }

/* このデモ用に見た目を調整 */
header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 15px;
}
    header h1 {
        float: left;
        margin: 0;
    }
    header .menu-switch {
        float: right;
        cursor: pointer;
    }
#main {
    margin: 30px;
}
.drawer {
    display: none;
    background-color: #767676;
}
    .drawer.active {
        display: block;
    }
    .drawer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
        .drawer ul li a {
            display: block;
            padding: 15px;
            color: #fff;
            text-decoration: none; 
        }
            .drawer ul li a:hover {
                background-color: #f2f2f2;
                color: #ff0000;
            }

.clearfix {
	display: block;
	min-height: 1%;
}
.clearfix:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

JavaScript

$(function() {
    $('.menu-switch').click(function() {
		// 開いているメニューがないとき
        if ($('.drawer.active').size() == 0) {
            $('.drawer').addClass('active');
            $('#contents').addClass('cover');

            // 開いているメニューがあるとき
        } else {
            $('.drawer').removeClass('active');
            $('#contents').removeClass('cover');            
        } 
        return false;
    });
    
    // メニューボタン以外を押すとメニューを閉じる
    $('body>*:not(.drawer)').click(function() {
		$('.drawer').removeClass('active');
        $('#contents').removeClass('cover');
    });
});