'Adding transition to Side nav bar
I have a site with a side navigation bar that is supposed to slide in via the right side, then when you close it, it transitions back into the side. When designing this i realized that after clicking the side bar once it overrides my style of "transition:0.5s" and instead just appears.
Here is my code
window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}};
function openNav() {
document.getElementById("outerNav").style.display = "block";
document.getElementById("outerNav").style.transition = "0.5s";
document.getElementById("jrc-sidenav").style.width = "250px";
document.getElementById("et-main-area").style.opacity = "0.7";
document.getElementById("jrc-sidenav-background").style.backgroundColor = "rgba(255,255,255,0.7)";
document.getElementById("hamburger").style.display = "none";
}
function closeNav() {
document.getElementById("jrc-sidenav").style.width = "0";
document.getElementById("et-main-area").style.opacity = "1";
document.getElementById("jrc-sidenav-background").style.backgroundColor = "#fff";
document.getElementById("hamburger").style.display = "block";
setTimeout(function(){
document.getElementById("outerNav").style.display = "none";
},500);
}
.outerNav {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
transition: 0.5s;
}
<div id="outerNav" class="outerNav">
<div id="jrc-sidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<form autocomplete="off" name="wpv-filter--TCPID247646" action="https://jrcstage.jr-staging.info/search-results/" method="get" class="wpv-filter-form js-wpv-filter-form js-wpv-filter-form--TCPID247646 js-wpv-form-full" data-viewnumber="-TCPID247646" data-viewid="" data-viewhash="W10=" data-viewwidgetid="0" data-orderby="" data-order="" data-orderbyas="" data-orderbysecond="" data-ordersecond="" data-parametric="{" query":"normal","id":null,"view_id":null,"widget_id":0,"view_hash":"-tcpid247646","action":"\="" test-quadmenu\="" ?wpv_view_count="-TCPID247646","sort":{"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":""},"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":"","ajax_form":"","ajax_results":"","effect":"fade","prebefore":"","before":"","after":"","attributes":[],"environment":{"current_post_id":247646,"parent_post_id":0,"parent_term_id":0,"parent_user_id":0,"archive":{"type":"","name":"","data":[]}},"loop":{"type":"","name":"","data":[],"id":0}}"" data-attributes="[]" data-environment="{" current_post_id":247646,"parent_post_id":0,"parent_term_id":0,"parent_user_id":0,"archive":{"type":"","name":"","data":[]}}"=""><input type="hidden" class="js-wpv-dps-filter-data js-wpv-filter-data-for-this-form" data-action="https://jrcstage.jr-staging.info/search-results/" data-page="1" data-ajax="disable" data-effect="fade" data-maxpages="1" data-ajaxprebefore="" data-ajaxbefore="" data-ajaxafter=""><input class="wpv_view_count wpv_view_count--TCPID247646" type="hidden" name="wpv_view_count" value="-TCPID247646">
<div class="form-group search-page search">
<div class="search-form-group-inner">
<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed filter-text-search form-control" placeholder="Search"><i class="fas fa-search" style="position: absolute;
right: 20px;
top: 54px;
color: #aaaa;"></i>
<span style="display:none" class="js-wpv-dps-spinner"><img src="https://jrcstage.jr-staging.info/wp-content/plugins/wp-views/embedded/res/img/ajax-loader4.gif"></span>
<input type="submit" class="jrc-search-button wpv-submit-trigger js-wpv-submit-trigger btn" name="wpv_filter_submit" value="Search">
</div>
</div>
</form>
Solution 1:[1]
The Problem is your outer-nav. When you open the menu it got set to "display:block" - that happens without a transition. If you also resize it from 0% to 100% with a transition, it should work. See the snippet:
window.onclick = function(event) {
if (event.target == document.getElementById('outerNav')) {
closeNav();
}
};
function openNav() {
document.getElementById("outerNav").style.position = "fixed";
document.getElementById("outerNav").style.width = "100%"; //added this for opening the menu
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.getElementById("outerNav").style.width = "0%";
document.body.style.backgroundColor = "white";
}body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.outerNav {
display: block;
position: fixed;
left: 0;
top: 0;
width: 0%;
/* 0% when Menu is closed */
height: 100%;
overflow: hidden;
background-color: transparent;
transition: .5s;
}<body>
<div id="outerNav" class="outerNav">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</body>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |