滑入式导航叠加

Question

I have a template for an off-screen nav that slides in from the left when a toggle is clicked. What I'd like to happen is when the nav slides in, an overlay darkens the content behind it. To do this, I wrapped the page content in a div and tried to add a BG color to cover the content, but it doesn't seem to work.

Can anyone help? Code Below:

 $(document).ready(function() { var toggle = $('.toggle'); var osNav = $('.offScreen-nav'); var pageContainer = $('.page-container'); toggle.click(function() { osNav.toggleClass('showNav'); pageContainer.toggleClass('navOnScreen') }); }) 

 * { margin: 0; padding: 0; overflow: hidden; } nav { width: 100%; height: 70px; //border: 1px solid; background-color: #f1f1f1; display: flex; flex-direction: row; justify-content: flex-end; } .toggle { height: 50px; width: 50px; border: 1px solid; background-color: rgba(17,17,17, .9); opacity: .9; margin: 20px 15px; cursor: pointer; align-self: center; } main { height: 1000px; background-color: #ddd; } .offScreen-nav { width: 340px; height: 100vh; position: fixed; margin-left: 0; overflow: hidden; z-index: 2000; background-color: rgba(17,17,17, .9); transition: all .3s ease-in-out; transform: translate3d(-340px,0,0); } .showNav { transform: translate3d(0,0,0); } .page-container { transform: translate3d(0,0,0); transition: all .3s ease-in-out; transition-delay: .1s; } .page-container.navOnScreen { background-color: rgba(0,0,0, .6); transform: translate3d(20px,0,0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="offScreen-nav"></div> <div class="page-container"> <nav> <div class="toggle"></div> </nav> <main></main> </div> 

Answer 1

Remove background-color from nav & main as well (it is currently overlapping the body 's background color) like,

In JS:

// Toggle a class which removes background-color from main & nav
nav.toggleClass('remove-bg')
main.toggleClass('remove-bg')

In CSS:

/* Resetting background-color to transparent */
.remove-bg {
  background: transparent;
}

/* To get the transition well */
main, nav {
  transition: all .3s ease-in-out;
  transition-delay: .1s;
}

Have a look at the snippet below:

 $(document).ready(function() { var toggle = $('.toggle'); var osNav = $('.offScreen-nav'); var pageContainer = $('.page-container'); var nav = $('nav'); var main = $('main'); toggle.click(function() { osNav.toggleClass('showNav'); pageContainer.toggleClass('navOnScreen') nav.toggleClass('remove-bg') main.toggleClass('remove-bg') }); }) 

 * { margin: 0; padding: 0; overflow: hidden; } nav { width: 100%; height: 70px; //border: 1px solid; background-color: #f1f1f1; display: flex; flex-direction: row; justify-content: flex-end; transition: all .3s ease-in-out; transition-delay: .1s; } .toggle { height: 50px; width: 50px; border: 1px solid; background-color: rgba(17,17,17, .9); opacity: .9; margin: 20px 15px; cursor: pointer; align-self: center; } main { height: 1000px; background-color: #ddd; transition: all .3s ease-in-out; transition-delay: .1s; } .offScreen-nav { width: 340px; height: 100vh; position: fixed; margin-left: 0; overflow: hidden; z-index: 2000; background-color: rgba(17,17,17, .9); transition: all .3s ease-in-out; transform: translate3d(-340px,0,0); } .showNav { transform: translate3d(0,0,0); } .page-container { transform: translate3d(0,0,0); transition: all .3s ease-in-out; transition-delay: .1s; } .page-container.navOnScreen { background-color: rgba(0,0,0, .6); transform: translate3d(20px,0,0); } .remove-bg { background: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="offScreen-nav"></div> <div class="page-container"> <nav> <div class="toggle"></div> </nav> <main></main> </div> 

Hope this helps!

Answer 2

You can do something like this:

 $(document).ready(function() { var toggle = $('.toggle'); var osNav = $('.offScreen-nav'); var pageContainer = $('.page-container'); var darkLayer = $('main, nav'); toggle.click(function() { $(this).toggleClass('border'); osNav.toggleClass('showNav'); darkLayer.toggleClass('darkLayer'); pageContainer.toggleClass('navOnScreen'); }); }) 

 * { margin: 0; padding: 0; overflow: hidden; } nav { width: 100%; height: 70px; //border: 1px solid; background-color: #f1f1f1; display: flex; flex-direction: row; justify-content: flex-end; } .toggle { height: 50px; width: 50px; border: 1px solid; background-color: rgba(17,17,17, .9); opacity: .9; margin: 20px 15px; cursor: pointer; align-self: center; } main { height: 1000px; background-color: #ddd; } .offScreen-nav { width: 340px; height: 100vh; position: fixed; margin-left: 0; overflow: hidden; z-index: 2000; background-color: rgba(17,17,17, .9); transition: all .3s ease-in-out; transform: translate3d(-340px,0,0); } .showNav { transform: translate3d(0,0,0); } .page-container { transform: translate3d(0,0,0); transition: all .3s ease-in-out; transition-delay: .1s; } .page-container.navOnScreen { background-color: rgba(0,0,0,.6); transform: translate3d(20px,0,0); } .darkLayer { background: #333; opacity: .5; transition: all .3s linear; } .border { border-color: #fff; transition: all .3s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="offScreen-nav"></div> <div class="page-container"> <nav> <div class="toggle"></div> </nav> <main></main> </div> 

Answer 3

What I normally do is add another element called overlay and toggle it as you are toggling the nav item to produce that effect. I would also move the toggle button out of the nav so as you can give it a position absolute as you will need to apply a z-index to keep it visible when the overlay is enabled. See below... Hope it helps!

 $(document).ready(function() { var toggle = $('.toggle'); var osNav = $('.offScreen-nav'); var overlay = $('.overlay'); var pageContainer = $('.page-container'); toggle.click(function() { osNav.toggleClass('showNav'); overlay.toggleClass('showNav'); pageContainer.toggleClass('navOnScreen') }); }) 

 * { margin: 0; padding: 0; overflow: hidden; } nav { width: 100%; height: 70px; //border: 1px solid; background-color: #f1f1f1; display: flex; flex-direction: row; justify-content: flex-end; } .toggle { height: 50px; width: 50px; border: 1px solid; background-color: rgba(17,17,17, .9); opacity: .9; /* margin: 20px 15px; */ cursor: pointer; align-self: center; position: absolute; top: 10px; right: 15px; z-index: 2; } main { height: 1000px; background-color: #ddd; } .offScreen-nav { width: 340px; height: 100vh; position: fixed; margin-left: 0; overflow: hidden; z-index: 2000; background-color: rgba(17,17,17, .9); transition: all .3s ease-in-out; transform: translate3d(-340px,0,0); } .showNav { transform: translate3d(0,0,0); } .page-container { transform: translate3d(0,0,0); transition: all .3s ease-in-out; transition-delay: .1s; } .page-container.navOnScreen { background-color: rgba(0,0,0, .6); transform: translate3d(20px,0,0); } .overlay.showNav { width: 100vw; height: 100vh; background: blue; position: fixed; z-index: 1; } .overlay{ transition:0.3s ease; opacity: 0.5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="offScreen-nav"></div> <div class="overlay"></div> <div class="toggle"></div> <div class="page-container"> <nav> </nav> <main></main> </div>