Membuat Menu Dengan Jquery
Halo teman-teman segala, apa kabar semuanya setelah libur panjang. Pastinya fresh yah yang habis liburan bagi menghilangkan penat yang terdapat, ketemu lagi dengan saya di artikel kali ini mengenai Membuat Menu Dengan Jquery. Oke artikel kali ini kita akan membangun fitur yang mana ketika di klik karenanya fitur akan muncul dari sebelah kanan di bantu dengan Jquery, seketika saja kita lihat demo nya di gambar di bawah ini
Ketika diklik “Open Fitur” karenanya fitur akan muncul dan apabila di klik silang (x) karenanya fitur akan kembali menghilang, kedua ini di singkronisasikan oleh css dan Jquery. Bagus mari seketika kita praktekkan, jangan lupa teman-teman siapkan text editornya lalu copy script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Merancang Fitur Dengan Jquery</title>
</head>
<body>
<div id=container>
<h1 class=slide-menu-open>Open Fitur</h1>
<div class=side-menu-overlay style=width: 0px; opacity: 0;></div>
<div class=side-menu-wrapper>
<a href=# class=menu-close>times;</a>
<ul>
<li><a href=http://www.google.com target=_blank rel=nofollow>Google Search</a></li>
<li><a href=http://www.yahoo.com target=_blank rel=nofollow>Yahoo Search</a></li>
<li><a href=http://www.facebook.com target=_blank rel=nofollow>Facebook</a></li>
<li><a href=http://www.flickr.com target=_blank rel=nofollow>Flickr</a></li>
</ul>
</div>
</div>
</body>
</html>
Kemudian pastekan di pada text editornya, save dengan nama index.html dan run di browsernya. Dan outputnya seperti gambar di bawah
Langkah berikutnya atur html nya dengan css
<style type=text/css>
*{
padding: 0;
margin: 0
}
h1{
color: orange;
cursor: pointer;
}
#container{
width: 600px;
margin: auto
}
.side-menu-wrapper {
overflow: hidden;
background: rgba(0,0,0,.95);
padding: 40px 0 0 40px;
position: fixed;
top: 0;
right: -290px;
height: 100%;
z-index: 2;
transition: 0.5s;
width: 250px;
font: 20px Courier New, Courier, monospace;
}
.side-menu-wrapper > ul{
list-style:none;
padding:0;
margin:0;
overflow-y: auto;
width:500px;
height:95%;
}
.side-menu-wrapper > ul > li > a {
display: block;
border-bottom: 1px solid #131313;
padding: 6px 4px 6px 4px;
color: #989898;
transition: 0.3s;
text-decoration: none;
}
.side-menu-wrapper > a.menu-close {
padding: 8px 0 4px 23px;
color: #6B6B6B;
display: block;
margin: -30px 0 -10px -20px;
font-size: 35px;
text-decoration: none;
}
.side-menu-overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
transition: opacity 1s;
}
</style>
Tambahkan css nya di pada tag <head>, lalu save dan refresh di browsernya karenanya akan tampil seperti gambar di bawah ini
Ketika di klik belum berfungsi fitur nya karena di class (“.side-menu-wrapper“) di berikan -290px
Kemudian nanti kita akan berikan guna Jquery nya, pertama-tama sertakan library Jquery nya di pada tag <head>
<script type=text/javascript src=https://code.jquery.com/jquery-3.1.1.js></script>
Lalu tambahkan script di bawah ini
<script type=text/javascript>
var slidebar_width = 290; //slidebar width + padding size
var slide_bar = $(.side-menu-wrapper);
var slide_open_btn = $(.slide-menu-open);
var slide_close_btn = $(.menu-close);
var overlay = $(.side-menu-overlay);
slide_open_btn.click(function(e){
e.preventDefault();
slide_bar.css( {right: 0px});
overlay.css({opacity:1, width:100%});
});
slide_close_btn.click(function(e){
e.preventDefault();
slide_bar.css({right: -+ slidebar_width + px});
overlay.css({opacity:0, width:0});
});
</script>
Jikalau telah save dan refresh browsernya, karenanya fitur yang kita bikin telah berhasil di bikin.
Nah teman-teman lumayan gampang bukan, kalian pun dapat memodifikasi dari contoh diatas. Urgen sekali kita membangun fitur-fitur fitur seperti diantara contoh di atas ini bagi di letakkan pada situs kita supaya lebih menarik dan atraktif, hingga di sini dulu di artikel kali ini mengenai Membuat Menu Dengan Jquery. Semoga menjadi tambahan refrensi bagi perancangan fitur di sebuah situs, kita berjumpa lagi di artikel berikutnya. Terimakasih dan hingga jumpa.
Semoga bermanfaat 🙂
Baca pun artikel mengenai Membuat Menu Slide Down Ketika Scroll dengan Jquery
Sumber https://kursuswebsite.org
