SideNav Close on Button Click


Topic: SideNav Close on Button Click

athleticssoftware pro asked 6 years ago

Is there a way that we can get the sidenav to close on a button click? Example by...
// Show sideNav
$('.button-show’).sideNav('show');

// Hide sideNav
$('.button-hide').sideNav('hide');
Here is some example code based on the samples on the site.
<div id="slide-out" class="side-nav white">
<ul class="custom-scrollbar mr-0 mt-0 mb-0 ps ps--theme_default" style="list-style:none; font-size:14px !important; font-weight: 900; width:100%;" >
<li><div class=”button-collapse”>Close the SideNav</div></li>
<li>
<h4 class="pl-1" style="font-family:Arial !important; font-weight:900 !important;">Some Menu</h4>
</li>
<li>
<ul class="collapsible collapsible-accordion" style="list-style:none; padding-left: 0; margin-bottom: 0; font-size: 14px !important; ">
<li><a class="nav-link waves-effect MyStyle" href="/">Home</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/FAQS">FAQ</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/Forms">Forms</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/contact-us">Contact Us</a></li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></ul>
</div>
<div class="button-show" style="float:right; border: 2px solid black;">Open Side Nav</div>
<style>
.MyStyle {
color: rgba(162, 0, 0, 1) !important;
display: block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 40px;
padding-left: 1.25em;
font-size: 1.25em !important;
font-weight: 900 !important;
text-transform: none;
line-height: unset !important;
font-family: Arial !important;
}
.collapsible-body {
margin: 0 auto !important;
}
.collapsible-body > ul {
list-style: none;
padding: 0 !important;
margin: 0 auto !important;
}
.collapsible-body > ul > li > a {
display: block !important;
font-weight: normal !important;
line-height: 20px !important;
color: rgba(0, 0, 0, 1) !important;
font-size: 1.25em !important;
text-transform: none;
background-color: rgba(255, 255, 255, 1) !important;
color: rgba(0, 0, 0, 1) !important;
font-family: Arial !important;
font-weight: bold !important;
width: auto !important;
height: auto !important;
clear: unset;
white-space: unset;
}
.collapsible-header {
color: rgba(162, 0, 0, 1) !important;
display: block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 40px;
padding-left: 1.25em;
font-size: 1.25em !important;
font-weight: 900 !important;
text-transform: none;
line-height: unset !important;
font-family: Arial !important;
}
.collapsible li .collapsible-header.active,
.collapsible li .collapsible-header:focus {
background-color: rgba(162, 0, 0, 1) !important;
border-color: rgba(162, 0, 0, 1);
color: rgba(255, 255, 255, 1) !important;
}
.collapsible-body > ul > li > a:hover,
.collapsible-body > ul > li > a:focus {
color: rgba(255, 255, 255, 1) !important;
text-decoration: none;
background-color: rgba(162, 0, 0, 1) !important;
}
</style>
<script type=”text/javascript”>
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

// ****The below code doesn’t work.****
// Show sideNav
$('.button-show’).sideNav('show');

// Hide sideNav
$('.button-collapse').sideNav('hide');

// the below code will only display the SideNav
$('.button-show’).sideNav();
</script>

                                                                     

Piotr Glejzer staff commented 6 years ago

Hi, 

hmm, I think is hard to have a 'hide' button cause if you click 'show' button is showing a overlay on all resolution so if you want close sidenav you have to click on that overlay. Probably if you want to do something like that you have to have button positioning absolute to everything. We will make a refactoring of sidenav in nearly future.

Best,

Piotr


athleticssoftware pro commented 6 years ago

Hi Piotr,

Is there any way we can add a button to close the sidenav from inside the sidenav while it is open?

Thanks!


Piotr Glejzer staff commented 6 years ago

Hi,

do you mean something like that?

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/120704

Best,

Piotr


athleticssoftware pro commented 6 years ago

Yes! You're a genius!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No