JSFiddle - React, Tailwind, and code Playground
by RzaaL1306
HTML
<script src="https://github.com/hendriono/jQuery-Klikanan/raw/master/js/jquery.klikanan.min.js"></script>
<div id="top"></div>
<br/>
<h1>jQuery Menu Klik Kanan</h1>
<div id="page">
<div id="areaKlik" class="item">
<p>Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan. Area Klik Kanan.<p/>
</div>
<div id="menuKanan">
<ul>
<li><a class="facebook" href="#">Share on Facebook</a></li>
<li><a class="twitter" href="#">Share on Twitter</a></li>
<li><a class="delicious" href="#">Share on Delicious</a></li>
<li><a class="stumble" href="#">Share on StumbleUpon</a></li>
<li><a class="reddit" href="#">Share on ReddIt</a></li>
<li><a class="digg" href="#">Share on Digg</a></li>
</ul>
</div>
<div...
CSS
body, ul, ol, li, p, h1,h2, h3, h4, h5, h6, form, blockquote{margin:0;padding:0;}
body{background-color:#212121;color:#999;display:block;font:13px/1.3 'Segoe UI',Arial,sans-serif;}
*{margin:0;padding:0}
#top{background:url('https://lh4.googleusercontent.com/-QDHA9dSHGyg/TuyZtBjjnFI/AAAAAAAAF30/sEpK9nCYyYk/s800/malubg.png') repeat-x scroll 0 bottom transparent;height:32px;border-bottom:1px solid #000;box-shadow: 0 0 2px #000 inset}
h1 {font:bold 30pt Georgia,serif;text-align:center;color:#444;text-shadow: 1px 1px 0px #000, -1px -1px 0px #606060;}
#footer{background-image:url('https://lh4.googleusercontent.com/-QDHA9dSHGyg/TuyZtBjjnFI/AAAAAAAAF30/sEpK9nCYyYk/s800/malubg.png');background-color:#212121;bottom:0;height:70px;left:0;position:fixed;width:100%;z-index:999;border-top:1px solid #000;-moz-box-shadow:0 1px 0 #302F2F inset}
#footer h2{color:#EEE;font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:22px 0;position:absolute;width:400px}
#footer a.btu,a.btu:visited{background:url('https://lh3.googleusercontent.com/-M_IC-3AFy_I/TyvWVHhrJGI/AAAAAAAAGAA/QjaHheGJ8XY/d/refreshlogo.png') no-repeat right -30px transparent;border:medium none;color:#FCFCFC;height:30px;left:50%;font-size:12px;line-height:31px;margin:23px 0 0 110px;position:absolute;text-decoration:none;top:0;width:280px;}
#footer a.btu:hover {background-position:right top;}
a,a:visited{color:#97CAE6;outline:medium none;text-decoration:none}
div.dvd-promo {width : 480px; margin : 10px auto; text-align:left;}
.credit, .item {width : 40%; font-size:9pt;text-align:center;display:block;padding:15px 10px;margin:1em auto 80px;color:#7c725f;word-wrap:break-word;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#1a1a19), to(#1f1f1e));background-image:-moz-linear-gradient(#1a1a19, #1f1f1e);background-image:-ms-linear-gradient(#1a1a19, #1f1f1e);background-image:linear-gradient(#1a1a19, #1f1f1e);background-image:-webkit-gradient(linear, left top, left...
JavaScript
$(function () {
$('#areaKlik').klikanan({
speed: 400,
overlay: false
});
});