Pada artikel saya kali ini saya akan membagikan script untuk membuat sebuah sliding menu pada sebuah website. Menubar ini berbeda dengan menubar biasanya karena menubar ini dapat disembunyikan di samping halaman website seperti layaknya menu pada aplikasi android. Untuk hasil dari script yang saya bagikan ini menubar dapat dilihat dengan menaruh cursor ke kiri layar monitor sampai posisi paling kiri, dengan begitu menubar akan otomatis keluar, dan untuk menyembunyikannya kita bisa mengeklik tombol "x" pada bagian pojok kanan atas menubar.
 |
| Hasil yang akan diperoleh adalah sebagai berikut... |
Untuk scriptnya adalah sebagai berikut...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hidden Menubar</title>
<style type="text/css">
body{
background: lightgreen;
height: 1000px;
width: 100%;
margin: 0;
}
.menubar{
width: 400px;
height: 100%;
background: lightgrey;
margin: 0;
float: left;
transform: translate(-100%,0%);
transition: 0.5s;
}
.x{
position: absolute;
top: 10px;
left: 350px;
font-size: 40px;
font-family: verdana;
cursor: pointer;
}
.menubar li{
list-style-type: none;
font-family: verdana;
font-size: 30px;
line-height: 60px;
cursor: pointer;
transform: translate(-30px);
width: 300px;
text-align: center;
}
.menubar li:hover{
background: darkgrey;
}
</style>
</head>
<body>
<div class="menubar">
<div class="x">x</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
<script type="text/javascript">
document.body.addEventListener('mousemove', function(e){
const xPos = Math.round((e.clientX/window.innerWidth)*100);
if(xPos == 0){
var menubar = document.getElementsByClassName('menubar')[0];
menubar.style.transform = 'translate(0%,0%)';
}
const x = document.getElementsByClassName('x')[0];
x.addEventListener('click', function(){
menubar.style.transform = 'translate(-100%,0%)';
})
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Hidden Menubar</title>
<style type="text/css">
body{
background: lightgreen;
height: 1000px;
width: 100%;
margin: 0;
}
.menubar{
width: 400px;
height: 100%;
background: lightgrey;
margin: 0;
float: left;
transform: translate(-100%,0%);
transition: 0.5s;
}
.x{
position: absolute;
top: 10px;
left: 350px;
font-size: 40px;
font-family: verdana;
cursor: pointer;
}
.menubar li{
list-style-type: none;
font-family: verdana;
font-size: 30px;
line-height: 60px;
cursor: pointer;
transform: translate(-30px);
width: 300px;
text-align: center;
}
.menubar li:hover{
background: darkgrey;
}
</style>
</head>
<body>
<div class="menubar">
<div class="x">x</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
<script type="text/javascript">
document.body.addEventListener('mousemove', function(e){
const xPos = Math.round((e.clientX/window.innerWidth)*100);
if(xPos == 0){
var menubar = document.getElementsByClassName('menubar')[0];
menubar.style.transform = 'translate(0%,0%)';
}
const x = document.getElementsByClassName('x')[0];
x.addEventListener('click', function(){
menubar.style.transform = 'translate(-100%,0%)';
})
})
</script>
</body>
</html>
Sekian untuk script Sliding Menunya, somoga bermanfaat:-)
0 Komentar