Topic: Custom open/close SideNav
Hi,
Im trying to customize some operations with closing/opening SideNav menu, using declared on https://mdbootstrap.com/docs/jquery/navigation/sidenav/ jquery methods:
case 1. I want to show SideNav by default after page loaded, by such a code:
$(document).ready(function() {
$('.button-collapse').sideNav({showOverlay: false}, 'show');
});
but SideNav does not appear.
case 2. Im trying to open SideNav by clicking exact page element using this:
<div onclick="openNav()">
[CUSTOM OPEN]
</div>
...
function openNav() {
$('.button-collapse').sideNav({showOverlay: false}, 'show');
}
but clicking does not show SideNav.
case 3. I need to close SideNav by clicking on any place of a page content, but do not want to use shadowed and content blocking overlay. Trying to get it by such a code:
<main onclick="closeNav()">
...
function closeNav() {
$('.button-collapse').sideNav({showOverlay: false, timeDurationClose: 200}, 'hide');
}
this code closes SideNav successfully, but - very quickly, without animation indicated by timeDurationClose value.
Please help me with these three cases.
My snipped on https://mdbootstrap.com/snippets/jquery/vitaly_z/1662753#!
Grzegorz Bujański staff answered 5 years ago
Hi!
case 1.: Try this:
$(document).ready(() => {
$(".button-collapse").sideNav({breakpoint: 800});
});
case 2.: We will fix it.
case 3.: You don't need this: <main onclick="closeNav()">
. close option work without this code. you have to add timeDurationClose when you init sideNav:
$(document).ready(() => {
$(".button-collapse").sideNav({timeDurationClose: 200});
});
Vito answered 5 years ago
thanks. Not all works.
case 1: working
case 2: please provide date info when this fix will be available for download. If it more than nearest week, please tip how to fix it in mdb code by myself
case 3: decision you provided does not work, see https://mdbootstrap.com/snippets/jquery/vitaly_z/1662753#!
Grzegorz Bujański staff commented 5 years ago
Case 2: It will take more than nearest week. It's hard to tell me right now, where is the problem, and how to improve it. We need time to review the code and fix it.
Case 3: Ok. It's looks like next bug. Auto close didn't work. If you add again <main onclick="closeNav()">
it's working. We will fix it too.
Vito answered 5 years ago
So we are waiting for 2 fixes. Thank you. Will they appear in a nearest new MDB release or how we can be notified when they will available for download?
Grzegorz Bujański staff commented 5 years ago
You can check ours changelog before download: https://mdbootstrap.com/docs/jquery/changelog/ if we fix something, we always write about it
Best, Grzegorz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.1
- Device: Desctop
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: Yes