Membuat sliding menu hampir sama dengan membuat dropdown menu, namun dengan sliding menu menu yang ditampilkan lebih animatif sehingga lebih enak dipandang, dan tampilan blog kita menjadi lebih menarik.
ini adalah contoh tampilan sliding menu untuk mencobanya tinggal klik gambar garis-garis yang pinggir
ini adalah contoh tampilan sliding menu untuk mencobanya tinggal klik gambar garis-garis yang pinggir
Untuk membuat sliding menu seperti di atas kita tinggal membuat file html pada notepad, kemudian copykan script berikut
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding:0;
margin:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
background-color:#FFF
}
header {
width:100%;
background-color:#006faa ;
z-index:1000;
}
.menu-bar {
color:#FFF;
font-size:25px;
cursor:pointer;
padding:10px 12px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:50px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.jw-drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.jw-drawer {
position:fixed;
left:-250px;
background-color:#006faa;
height:100%;
z-index:100;
width:230px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
}
.jw-drawer ul li {
list-style:none;
}
.jw-drawer ul li a {
padding:10px 20px;
text-decoration:none;
display:block;
color:#FFF;
border-top:0.5px solid #059;
}
.jw-drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.jw-drawer ul li a i {
width:50px;
height:35px;
text-align:center;
padding-top:15px;
}
@keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
@keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
.content{
padding: 100px 0 0 250px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sliding menu dengan CSS dan HTML | smkimg.blogspot.co.id</title>
<meta name="description" content="Tutorial cara membuat sliding menu dengan CSS dan HTML | Drawer menu atau biasa dikenal dengan menu tersembunyi dengan hamburger menu"/>
<meta name="keywords" content="jurnalweb. jurnal web indonesia, sliding menu, css, sliding menu, slide menu, hamburger menu, css menu"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<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><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fa fa-google-plus"></i> Google Plus</a></li>
<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<h1>SMK Insan Mandiri</h1>
<p>Contoh pembuatan sliding menu / drawer menu dengan CSS, baca tutorialnya <a href="http://www.smkimg.blogspot.co.id/>disini</a></p>
</div>
</body>
</html>
Tampilan untuk menu di atas akan berbeda dengan hasilnya karena bagian headernya di rubah pada style bagian jw-drawer position : fixed diubah menjadi relative. nanti untuk mencobanya bisa di coba apakah dengan fixed atau relative, bagaimana perubahan sliding menu tersebut.
Itulah cara membuat sliding menu, mudah-mudahan bermanfaat.
0 komentar: