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>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>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;}
}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">
Letakkan link style sheet nya dibawah </title>.
Sekarang tinggal save atau simpan aja, setelah itu coba jalankan di browser kalian masing-masing.
Maka bentuk Hasil nya Akan Seperti ini.
Mungkin itu saja yang bisa mimin berikan, sekian dulu yah tutorial kali ini, semoga Bermanfaat Buat Kita Semua.
Sekarang tinggal save atau simpan aja, setelah itu coba jalankan di browser kalian masing-masing.
Maka bentuk Hasil nya Akan Seperti ini.
Comments
Post a Comment