Topic: SideNav Close on Button Click
Is there a way that we can get the sidenav to close on a button click?
Example by...
Here is some example code based on the samples on the site.
// Show sideNav
$('.button-show’).sideNav('show');
// Hide sideNav
$('.button-hide').sideNav('hide');
<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>
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- ForumUser: 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
Tags
Piotr Glejzer staff commented 5 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 5 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 5 years ago
Hi,
do you mean something like that?
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/120704
Best,
Piotr
athleticssoftware pro commented 5 years ago
Yes! You're a genius!