Langkah Pertama
Buat File Baru dengan extension HTML.
Kemudian Buat lah kode seperti dibawah Ini.
<!DOCTYPE html>
<html>
<head>
<title>Menu Slider Berbasis HTML</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Pastekan ke file yang baru kalian buat.Langkah Kedua
Kemudian Kita Buat Tempat Menu slider nya, Berikut kode nya.
<img src="header.png" width="250" height="103">
<header>
<input type="checkbox" id="tag-menu"/>
<label class="fa fa-bars menu-bar" for="tag-menu"></label>
<div class="jw-drawer">
<nav>
<ul>
<li><img src="h.png" width="100" height="100"></li>
<li><a href="#">Home</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Admin</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</header>
Letakkan kode diatas ini dibawah <body>.Langkah Ketiga
Kita Tambahkan style CSS nya.
body{
color:#A55842;
background:#6EA597;
font-family: 'Viga', cursive;
}
*{
margin:0;
padding:0;
}
header{
background:#51796F;
}
.menu-bar {
color:#FFF;
font-size:18px;
cursor:pointer;
padding:4px 2px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:5px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.jw-drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.jw-drawer {
position:fixed;
transition-timing-function: ease-out;
left:-280px;
background-color:#51796F;
height:100%;
z-index:100;
width:145px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
margin-left: 0px;
}
.jw-drawer ul li {
list-style:none;
}
.jw-drawer ul li a {
padding:10px 20px;
text-decoration:none;
display:block;
color:#FFF;
}
.jw-drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.jw-drawer ul li a i {
width: 15px;
height:15px;
text-align:center;
padding-top:500px;
}
@keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
@keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
Letakkan kode css diatas ini dibawah <style type="text/css">.Langkah terakhir
Langkah terakhir, adalah memberikan link style sheet nya.
<link href="https://fonts.googleapis.com/css?family=Caveat|Viga|Trade+Winds|Droid+Sans+Mono" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">