<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } body, html { overflow-x: hidden; } .sidebar { -webkit-transition: all .3s ease-in-out; } .sidebar-toggle, .wrap { -webkit-transition: -webkit-transform .3s ease-in-out; } .sidebar-checkbox { display: none; } .wrap { padding: 50px 8px; } .sidebar { position: fixed; top: 0; bottom: 0; left: -200px; width: 200px; background: gray; } .sidebar-toggle { position: fixed; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 3px; } .sidebar-toggle span, .sidebar-toggle span:before, .sidebar-toggle span:after { position: absolute; width: 20px; height: 2px; background: green; } .sidebar-toggle span { top: 14px; left: 5px; } .sidebar-toggle span:before { content: ''; left: 0; top: -7px; } .sidebar-toggle span:after { content: ''; left: 0; top: 7px; } #sidebar-checkbox:checked~.sidebar, #sidebar-checkbox:checked~.sidebar-toggle, #sidebar-checkbox:checked~.wrap { -webkit-transform: translateX(200px); } #sidebar-checkbox:checked~.sidebar-toggle { background: green; } #sidebar-checkbox:checked~.sidebar-toggle span, #sidebar-checkbox:checked~.sidebar-toggle span:before, #sidebar-checkbox:checked~.sidebar-toggle span:after { background: white; } </style> </head> <body> <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox"> <div class="sidebar" id="sidebar">sidebar</div> <div class="wrap">wrap</div> <label for="sidebar-checkbox" class="sidebar-toggle"> <span></span> </label> </body> </html>