スライドメニューを追加するCSS

目的

muragonのカスタマイズ。

ボタンをクリックすると、画面左→右にスライドし表示されるメニューを追加する。

CSS

本コードは、Fontawesomeを使用。

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

/* チェックボタン */
#menu-switch {
display : none;
}

/* ボタンクリック動作 */
#menu-switch:checked ~ #s-menu {
transform : translate(250px);
}
#menu-switch:checked ~ #menu-btn {
transform : translate(250px);
}

#menu-switch:checked ~ #menu-filter {
width : 100%;
}

/* 全体(グレー表示) */
#menu-filter {
display : block;
position : fixed;
top : 0;
left : 0;
width : 0;
height : 100%;
background : rgba(0, 0, 0, 0.5);
transition : 0.3s linear;
z-index : 10;
}

/* メニューボタン */
#menu-btn {
display : block;
position : fixed;
top : 30px;
left : 0;
width : 50px;
height : 50px;
line-height : 50px;
background-color : #fff;
font-size : 24px;
text-align : center;
transition : 0.3s linear;
z-index : 20;
}

#menu-btn:before {
font-family : FontAwesome;
content : "\f0c9";
}

/* メニュー */
#s-menu {
position : fixed;
top : 30px;
left : -250px;
width : 250px;
height : 100%;
background-color : #fff;
transition : 0.3s linear;
z-index : 20;
}

HTML

<input id="menu-switch" type="checkbox" value="off">
<label id="menu-btn" for="menu-switch"></label>
<label id="menu-filter" for="menu-switch"></label>
<div id=s-"menu">
メニュー
</div>