Author: | Amli |
---|---|
Views Total: | 1,251 views |
Official Page: | Go to website |
Last Update: | June 10, 2019 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 mobile menu system that slides out from the right side and pushes the content to the right.
How to use it:
Build the HTML for the off-canvas mobile menu.
<div class="menu" tabindex="1"> <div class="list"> <span>Menu Item 1</span> <span>Menu Item 2</span> <span>Menu Item 3</span> </div> <div class="content"> <!-- Toggle Button --> <div class="btn"></div> Main Content Here </div> </div>
The necessary CSS styles.
.menu{ width:40px; height:40px; display:block; position:relative } .menu[tabindex]{outline:none} .list,.content{ height:100%; top:0; z-index:-1; display:flex; position:fixed; align-items:center; flex-flow:column wrap; justify-content:center; transition:all .75s ease } .list{ background:#26d07c; width:20%; left:-20%; opacity:0 } .list span{ background:#fff; margin:10px 0; padding:10px 16px; border-radius:4px } .content{ background:#f5f5f1; width:100%; padding:0 16px; left:0; text-align:center } .btn{ background:#000; width:40px; height:40px; top:10px; left:10px; display:block; position:absolute; border-radius:50% } .btn:before, .btn:after{ background:#fff; content:""; width:20px; height:2px; left:10px; display:block; position:absolute; transition:all .75s ease } .btn:before{top:16px} .btn:after{bottom:16px} .menu:focus-within .list{left:0;opacity:1} .menu:focus-within .content{width:80%;left:20%} .menu:focus-within .btn:before{transform:rotate(45deg) translate(2px,2px)} .menu:focus-within .btn:after{transform:rotate(-45deg) translate(2px,-2px)}