Custom open/close SideNav


Topic: Custom open/close SideNav

Vito asked 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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
Tags