side nav bar in materialize css
<div class="row">
<div class="container">
<ul id="slide-out" class="side-nav">
<li><div class="user-view">
<div class="background">
<img src="../images/footer_bg.jpg">
</div>
<a href="#!user"><img class="circle" src="https://pbs.twimg.com/profile_images/877063380720173057/cTzoJiZ2_400x400.jpg"></a>
<a href="#!name"><span class="white-text name">Free Time Learn</span></a>
<a href="#!email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">code</i>HTML5</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">flare</i>CSS3</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">desktop_mac</i>Bootstrap 3</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">laptop_mac</i>Bootstrap 4</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">dvr</i>Materialize CSS</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Scripts</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">input</i>JavaScript</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">show_chart</i>jQuery</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">local_grocery_store</i>Ajax</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">local_library</i>AngularJS</a></li>
</ul>
<a href="#" data-activates="slide-out" class="btn button-collapse blue hoverable">SIDE NAV</a>
</div>
</div>
<script type="text/javascript">
$(".button-collapse").sideNav();
</script>
4
2
<nav> <!-- navbar content here --> </nav>
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user"><img class="circle" src="images/yuna.jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
Thank you!
2
0
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio