javascript - Materialize dropdown doesn't work -
i'm trying make dropdown menu inside sidebar materialize, doesn't work. width of dropdown isn't same trigger , padding move anchor bottom of list item. (the code same docs website)
here codepen issue: example
thanks :)
$(document).ready(function(){ // sidebar $(".button-collapse").sidenav({menuwidth: 320, activationwidth: 70, edge: 'left'}); // dropdown $('.dropdown-button').dropdown({ induration: 300, outduration: 225, constrain_width: false, // not change width of dropdown of activator hover: false, // activate on hover gutter: 0, // spacing edge beloworigin: false // displays dropdown below button } ); });
<div id="slide-out" class="side-nav full"> <ul> <li><a href="#">first link</span></a></li> <li><a href="#">second link</span></a></li> <!-- dropdown trigger --> <li><a class='dropdown-button' href='#' data-activates='dropdown1'>drop me!</a></li> </ul> </div> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!">three</a></li> </ul> <div class="row"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu medium black-text left"></i></a> </div>
you can set constraint_width = true
or initialize dropdown without passing json object.
$('.dropdown-button').dropdown({ induration: 300, outduration: 225, constrain_width: true, hover: false, gutter: 0, beloworigin: false } );
or may initialize dropdown defaults(by way, json object provided above default dropdown value).
$('.dropdown-button').dropdown();
Comments
Post a Comment