SideNav/NavBar Materializecss Material Design

a dynamic sidenav / navbar switching with materializecss.

Framework 1 :

Framework 2 :

+ Js file(s) :	//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js

+ Css file(s) :	//cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="536" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;nav&gt;
        &lt;ul id="slide-out" class="side-nav"&gt;
            &lt;li class="no-padding"&gt;
                &lt;ul class="collapsible"&gt;
                    &lt;li&gt;
                        &lt;a class="collapsible-header"&gt;Firest menu&lt;i class="mdi-navigation-arrow-drop-down"&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;div class="collapsible-body"&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 1&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 2&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 3&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="left hide-on-med-and-down"&gt;
            &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="dropdown1"&gt;Firest menu&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="no-padding"&gt;
                &lt;ul id='dropdown1' class='dropdown-content'&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 1 Sub menu 1&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 2&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Sub menu 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/nav&gt;

CSS

Javascript

SideNav/NavBar Materializecss Material Design

Link :

Fork button :

Embed preview :