Search code examples
javascriptcssmaterialize

Materialize CSS Sidenav open from bottom of screen


Does anyone know how to get the sidenav in Materialize CSS to slide open from the bottom of the screen?

It only has the option for left or right:

  $(document).ready(function(){
    $('.sidenav').sidenav({
      edge: 'left', // Choose the horizontal origin
    });
  });

Solution

  • The problem is that this isn't really possible without setting max-heights for the page, so if there is content below, it won't be shown if you force a max-height and then bring the menu up from below the max-height.

    So, the answer is no if you have content more than one window long.