the effect i'm trying achieve is: https://gesso-theme.myshopify.com/
when click on collapsible menu on top left.
the things i'm stuck , trying achieve are:
1.) how make menu seem shift body content right when menu shifts in? (this isn't important, nice know)
2.) why won't shadow div hides body content go full width , height of browser?
3.) want able achieve no matter content have in body.
4.) want achieve without plugin or bootstrap, javascript, jquery, css , html can understand what's going on.
$(".show-side-menu").click(function(){ $(".container").toggle(); $(".darkness").toggle(); });*{ margin:0; padding:0; } html, body{ height: 100%; margin: 0; } .container{ height:100%; width:200px; background:white; position:absolute; top:0; bottom:0; display:none; } a.show-side-menu{ background:blue; color:white; font-size:20px; z-index:10; position:absolute; } .random-content{ height:500px; width:500px; margin:10px; background:purple; } .darkness{ background:rgba(136, 114, 114, 0.65); position:absolute; top:0; bottom:0; left:0; right:0; display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="show-side-menu">show</a> <div class="darkness"></div> <div class="container"> </div> <div class="random-content"> </div> <div class="random-content"> </div> <div class="random-content"> </div> <div class="random-content"> </div>
using simplest html , css can give you
$(function() { $(".ui-menu-toggle").click(function() { $(".ui-menu").toggleclass("open"); console.info($(".ui-menu")); }); });.ui-menu { position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 1001; } .ui-menu > .ui-menu-overlay { opacity: 0; height: 100%; width: 100%; z-index: 0; position: fixed; background: #000; transition-property: opacity; transition-duration: 0.2s; } .ui-menu > .ui-menu-container { background-color: #fff; box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4); height: 100%; left: -340px; position: absolute; width: 320px; transition-property: transform; transition-duration: 0.3s; } .ui-menu.open { display: block; } .ui-menu.open > .ui-menu-overlay { opacity: 0.3; } .ui-menu.open > .ui-menu-container { transform: translatex(340px); } .ui-body { background: pink; position: absolute; bottom: 0; left: 0; right: 0; top: 0; transition-property: transform; transition-duration: 0.3s; } .ui-menu.open > .ui-body { transform: translatex(320px); z-index: -1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="ui-menu"> <div class="ui-menu-overlay"></div> <div class="ui-menu-container"> <a href="#" class="ui-menu-toggle">close menu</a> menu content </div> <div class="ui-body"> <a href="#" class="ui-menu-toggle">open menu</a> body content </div> </div>
Comments
Post a Comment