Change background in slicknav when open/closed

Question

I'm trying to change the background in Slicknav for when the Slicknav menu is opened and closed.

i use this code, but it doesnt work to me.

$(function(){
  var $bg;
    $('#menu-home').slicknav({
    duplicate: false,
    label: '',
    init: function(){
         $bg = $(".slicknav_menu");
    },
    open: function(){
         $bg.css({'background': '#222 !important'});
    },
    close: function(){
         $bg.css({'background': 'rgba(0, 0, 0, 0)'});
    }
    });
});

I've tried using basic if this then that and I feel like I'm just messing up this very simple piece of javascript.

Any help would be greatly appreciated!

ComputerWolf · Answer 1 · 2015-08-07T16:34:27.280

Not sure if you're using the latest version of SlickNav, but as of v1.0.3 the proper callbacks are beforeOpen, afterOpen, beforeClose and afterClose.

Here's a quick pen with background change working as expected: http://codepen.io/ComputerWolf/pen/KpEKMW

As a note, these are fired when the menu is opened and closed as well as each submenu. You can use the trigger to check what is firing the callback if you only want to change the background when the entire menu is opened or closed.

score 0 · Answer 2 · answered Sep 10 '15 at 18:59

To expound on @ComputerWolf I added the following to add and remove a class that I styled in Css. I used the trigger to check if it came from the Open/Close Button rather than a SubMenu

$('#mobile-menu').slicknav({
      label: '',
      beforeOpen: function(trigger){
        if($(trigger).hasClass('slicknav_btn')){ 
            $('.slicknav_menu').addClass('open-menu');
        }
      },
      afterClose: function(trigger){
        if($(trigger).hasClass('slicknav_btn')){ 
            $('.slicknav_menu').removeClass('open-menu');
        }
      }
});

score 0 · Answer 3 · answered Aug 20 '19 at 16:58

This worked for me

/* slicknav mobile menu active 
      ========================================================*/
    var $bg;
    $('.mobile-menu').slicknav({
      prependTo: '.navbar-header',
      parentTag: 'liner',
      allowParentLinks: true,
      duplicate: true,
      label: '',
      closedSymbol: '<i class="lni-chevron-right"></i>',
      openedSymbol: '<i class="lni-chevron-down"></i>',
      init: function () {
        $bg = $('.slicknav_menu');
      },
      afterOpen: function () {
        $bg.css({ 'background': 'rgba(25,118,210,.95)' });
      },
      afterClose: function () {
        $bg.css({ 'background': 'transparent' });
      }
    });

Change background in slicknav when open/closed

3 Answers3