DEMO
See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen.
チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。
HTML
<input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a><a href="#c" class="btn">MENU_C</a><a href="#d" class="btn">MENU_D</a></nav> <div id="a" class="result">A</div> <div id="b" class="result">B</div> <div id="c" class="result">C</div> <div id="d" class="result">D</div>
SCSS
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // タップしたときの黒ずみをなくす -webkit-touch-callout: none; // 長押しでメニューを呼び出さなくする -webkit-user-select: none; // テキストを選択不可にする } html { height: 100%; color: #212121; font: 10px AvenirNext-Heavy; } body { height: 100%; background: #f8f8f2; } [href] { color: #212121; text-decoration: none; } .btn { cursor: pointer; } .result { visibilty: hidden; position: fixed; top: 50%; left: 50%; margin: -100px; width: 200px; height: 200px; font-size: 20rem; line-height: 200px; text-align: center; opacity: 0; // transition: all .2s ease-in-out; } #btnMenu { $lineMargin: 20px; $lineWidth: 28px; $lineHeight: 4px; $btnSize: $lineWidth + $lineMargin * 2; $color: #bdbdbd; display: block; position: fixed; margin: 0; border: 0; width: $btnSize; height: $btnSize; top: 0px; left: 0px; z-index: 5; transition: background .2s ease-in-out, width 0s .2s ease-in-out, height 0s .2s ease-in-out; // 閉じるときはワンテンポ遅らせる -webkit-appearance: none; &:focus { outline: none; } &:before { position: absolute; top: $btnSize / 2 - $lineHeight / 2; left: $lineMargin; width: $lineWidth; height: $lineHeight; background: $color; content: ""; box-shadow: 0 -8px 0 $color, 0 8px 0 $color; } &:checked { // チェックがはいっているときは薄暗くして大きくする width: 100%; height: 100%; background: rgba(0, 0, 0, .2); transition: background .2s ease-in-out; } } #menu { $width: 200px; position: fixed; top: 0; bottom: 0; left: -$width - 10; width: $width; background: #fff; overflow: hidden; z-index: 10; box-shadow: 0 0 2px rgba(0, 0, 0, .4); transition: left ease-in-out .2s; .btn { box-sizing: border-box; display: block; padding-left: 20px; width: $width - 10; height: 44px; font-size: 1.4rem; line-height: 44px; -webkit-tap-highlight-color: rgba(0, 0, 0, .2); } &:before { box-sizing: border-box; display: block; margin-bottom: 10px; padding-left: 20px; border-bottom: solid 1px #bdbdbd; width: 100%; height: 60px; color: #bdbdbd; font-size: 2rem; content: "MENU"; line-height: 60px; } &:after { box-sizing: border-box; display: block; position: absolute; bottom: 0; left: 0; padding-left: 20px; border-top: solid 1px #bdbdbd; width: 100%; height: 40px; color: #bdbdbd; font-size: 1rem; content: "© COPYRIGHT"; line-height: 40px; } #btnMenu:checked + & { // チェックがはいっているときはメニューを開く left: 0; } } .result:target { visibilty: visible; opacity: 1; }