ShapeYourPath
(current)
Run Code
Live Code Editor- Materialize Sidenav Fixed HTML Structure
Source Code
<!DOCTYPE html> <html lang="en"> <head> <title>Materialize SideNav Fixed HTML Structure</title> <meta name="viewport" content="width = device-width, initial-scale = 1" /> <meta name="description" content=""> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style type="text/css"> p{font-size:18px;} h1{font-size:28px;} .sidenav{ width: 260px; } </style> </head> <body> <h1 class="center-align">Materialize SideNav Fixed HTML Structure</h1> <ul id="slide-out" class="sidenav sidenav-fixed"> <li> <div class="user-view"> <div class="background"> <img src="https://picsum.photos/300/300" /> </div> <a href="#user"><img class="circle" src="../code-support/images/person-chip.jpg" /></a> <a href="#name"><span class="white-text name">John Doe</span></a> <a href="#email"><span class="white-text email">johndoe@gmail.com</span></a> </div> </li> <li><a href="#!">Learn Web development</a></li> <li><a href="#!">Learn Graphics Designing</a></li> <li><div class="divider"></div></li> <li><a class="subheader">Mobile App </a></li> <li><a class="waves-effect" href="#!">Mobile App design & Development</a></li> </ul> <div class="container center-align"> <h4>Materialize CSS SideNav</h4> <a href="#" data-target="slide-out" class="sidenav-trigger btn">Click To See The Sidebar Menu</a> </div> <script type="text/javascript"> $(document).ready(function () { $(".sidenav").sidenav(); }); </script> </body> </html>
Output :
Running