Topic: Custom open/close SideNav

Vito free asked 4 years ago


Im trying to customize some operations with closing/opening SideNav menu, using declared on 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]
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!

Vito free answered 4 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 4 years ago

You can check ours changelog before download: if we fix something, we always write about it

Best, Grzegorz.

Vito free answered 4 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!

Grzegorz Bujański staff commented 4 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.

Grzegorz Bujański staff answered 4 years ago


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});

Please insert min. 20 characters.


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



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