javascript - How can I create a multi-colum dropdown menu in Materialize CSS? -


i'm working on personal project , due high number of elements drop down menu, multi column (2 columns, precise) work better. how go accomplishing in materialize css?

is similar have in mind? takes bit of custom css remove padding makes list items odd, shows 2 drop columns, , snaps 1 on smaller devices.

html

<div id="dropdown1" class="row dropdown-content">   <div class="col s12 m6">     <ul>       <li>1</li>       <li>2</li>       <li>3</li>     </ul>   </div>   <div class="col s12 m6">     <ul>       <li>4</li>       <li>5</li>       <li>6</li>     </ul>   </div> </div>  <nav>   <div class="nav-wrapper">     <ul>       <li><a class="dropdown-button" href="#!" data-activates="dropdown1">dropdown</a></li>     </ul>   </div> </nav> 

css

#dropdown1 div {   padding: 0; }  #dropdown1 li {   text-align: center; } 

jsfiddle


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -