sidenav code example
Example 1: html left menu
<! HTML, later CSS, then Javascript>
<!DOCTYPE html>
<html>
<head>
<script src="YourScript.js"></script>
<link href="YourCSSDocument.css" rel="stylesheet" type="text/css" media="screen" />
<style>
body {font-family: "Lato", sans-serif;}
.sidenav {height: 100%;width: 200px;position: fixed;z-index: 1;top: 0;left: 0;background-color: #464850;overflow-x: hidden;padding-top: 20px;}
.sidenav a {padding: 6px 8px 6px 16px;text-decoration: none;font-size: 25px;color: #818181;display: block;}
.sidenav a:hover {color: #f1f1f1;}
.main {margin-left: 200px; font-size: 20px; padding: 0px 10px;}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}}
</style>
</head>
<body>
<div class="sidenav">
<button onclick="Link1()" class="buttonActivMenu"><h3>Link 1</h3></a></button>
<button onclick="Link2()" class="buttonMenuWithUndercategory"><h3>link2</h3></a></button>
<button onclick="Link2.1()" class="buttonSecondMenu">link2.1</a></button>
<button onclick="Link2.2()" class="buttonLastSecondMenu">link2.2</a></button>
</div>
<div class="main">
Your text and images here
</div>
</body>
</html>
<! Now the CSS part:>
.buttonMenu {
background-color: #464850;
border: none;
border-bottom: 1px solid lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
.buttonMenu:hover {
background-color: grey;
color: black;
}
.buttonMenuWithUndercategory {
background-color: #464850;
border: none;
border-bottom: 1px dashed lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
.buttonMenuWithUndercategory:hover {
background-color: grey;
color: black;
}
.buttonSecondMenu {
background-color: #464850;
border: none;
border-bottom: 1px dashed lightgrey;
color: lightgrey;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 30px;
}
.buttonSecondMenu:hover {
background-color: grey;
color: black;
}
.buttonLastSecondMenu {
background-color: #464850;
border: none;
border-bottom: 2px solid lightgrey;
color: lightgrey;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 30px;
}
.buttonLastSecondMenu:hover {
background-color: grey;
color: black;
}
.buttonActivMenu {
background-color: #797c88;
border: none;
border-bottom: 1px solid lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
<! Now javascript:>
function Link1(){
window.location.href = "Link1";
}
function Link2(){
window.location.href = "Link2";
}
function Link2.1(){
window.location.href = "Link2.1";
}
function Link2.2(){
window.location.href = "Link2.2";
}
Example 2: materialize sidenav
<nav> </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>
Example 3: 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>