Semi-Fancy Menu

HTML
<html> <head></head> <body> <div class="main-content"> <div class="top-header"> <div class="overlay"> <h1>Hello World</h1> </div> </div> <div class="container"> <div class="column-block row"> <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est.</div> <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est.</div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan consectetur purus non feugiat. Vivamus vitae dui id risus bibendum tincidunt vitae quis enim. Phasellus quam enim, finibus et felis id, euismod mattis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ultricies, neque et varius pulvinar, dui tellus vestibulum erat, sed bibendum lectus leo at arcu. Quisque neque leo, consectetur vel turpis a, condimentum facilisis nulla. Nullam aliquam eros non placerat molestie. Morbi purus nisi, interdum vitae leo id, tempor scelerisque libero. Praesent condimentum volutpat consectetur. Nam non leo orci.</p> </div> </div> <div class="top-nav"> <div class="left menu-btn"> <svg viewBox="0 0 24 24"><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"/></svg> </div> <div class="center page-title">Page Title</div> <div class="right"></div> </div> <div class="main-menu"> <div class="main-menu-top"> <div>Main Menu</div> <svg class="close-menu" viewBox="0 0 24 24"><path d="M9,19l1.4-1.4L5.8,13H22v-2H5.8l4.6-4.6L9,5l-7,7L9,19z"/></svg> </div> <ul> <li><a href="#">Menu Item One</a></li> <li><a href="#">Menu Item Two</a></li> <li><a href="#">Menu Item Three</a></li> <li><a href="#">Menu Item Four</a></li> <li><a href="#">Menu Item Five</a></li> <li><a href="#">Menu Item Six</a></li> <li><a href="#">Menu Item Seven</a></li> <li><a href="#">Menu Item Eight</a></li> </ul> </div> </body> </html>
CSS
body{ font-family: 'Open Sans', sans-serif; font-size:14px; background-color:#000 !important; } h1{ font-family: 'Open Sans', sans-serif; text-transform:uppercase; } .top-header{ display:block; position:relative; width:100%; height:50vw; background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment: fixed; background-image:url(https://images.unsplash.com/photo-1572043775979-5353d3c61a21?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=715&q=80); margin-bottom:60px; } .column-block{ margin-bottom:60px; } .top-header .overlay{ display: flex; align-items: center; justify-content: center; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.6); color:#fff; } .main-content{ background-color:#333; display:block; position:absolute; width:100%; height:100%; transform: scale(1); transition:all 0.5s; color:#fff; line-height:1.5em; opacity:1; overflow-y:auto; } .main-content.shrink{ transform: scale(0.9) !important; opacity:0.3; overflow-y:hidden !important; cursor:pointer; } .main-content.shrink .container{ overflow-y:hidden !important; } .top-nav{ text-transform:uppercase; display: flex; position:fixed; top:0; left:0; align-items: center; justify-content: space-between; background-color:#222; width:100%; height:42px; color:#fff; padding:0 20px 0 20px; box-shadow: 0 0 10px black; } .top-nav .page-title{ font-size:12px; letter-spacing:0.5em; } .top-nav svg{ fill:#fff; width: 18px; height: 18px; } .menu-btn{ cursor:pointer; } .main-menu{ width:300px; height:100vh; display:block; position:fixed; background-color:#000; top:0; left:-320px; box-shadow: 0 0 10px black; transition: all 0.5s; border-style:solid; border-width:0 1px 0 0; border-color:#333; } .main-menu-top{ text-transform:uppercase; display: flex; position:relative; align-items: center; justify-content: space-between; background-color:#000; border-style:solid; border-color:#333; border-width: 0 0 1px 0; width:100%; height:42px; color:#fff; padding:0 20px 0 20px; box-shadow: 0 0 10px black; } .main-menu-top svg{ fill:#fff; width:18px; height:18px; cursor:pointer; } .main-menu ul{ margin:0; padding:0; max-height:calc(100vh - 40px); } .main-menu ul li{ display:block; position: relative; width:100%; border-style:solid; border-color:#333; border-width: 0 0 1px 0; color:#fff; } .main-menu ul li a{ display:block; position:relative; padding: 15px 20px 15px 20px; color:#fff; text-decoration:none; background-color:#111; transition: all 0.5s; } .main-menu ul li a:hover{ background-color:#000; } .main-menu.show{ left:0; }
JAVASCRIPT
jQuery( ".menu-btn" ).click(function() { jQuery( ".main-content" ).addClass( "shrink" ); jQuery( ".main-menu" ).addClass( "show" ); }); jQuery( ".close-menu, .main-content" ).click(function() { jQuery( ".main-content" ).removeClass( "shrink" ); jQuery( ".main-menu" ).removeClass( "show" ); }); window.document.onkeydown = function (e) { if (!e) e = event; if (e.keyCode == 27) { jQuery( ".main-content" ).removeClass( "shrink" ); jQuery( ".main-menu" ).removeClass( "show" ); } };
Expand for more options Login