Sliding Panel Using jQuery Plugin and CSS3

Sobat masih ingat dengan postingan Beben yang terdahulu enggak :p Slide Out With jQuery Plug-In, atau dengan yg ini nih sob Side Bar Menu. Artikel kali ini juga tidak jauh akan membicarakan mengenai slide menu yg keberadaannya ada di pinggir kiri/kanan ;) sebuah web/blog. Sebenarnya postingan ini sudah pernah dibikin oleh sobat kita http://granoblog.blogspot.com dengan title "Shoutmix Sliding Panel dengan jQuery" Disesi postingan sobat kita entuh, pada bagian tombol slidingnya no-fixed :-?? nah disini Beben si bloglang ganteng kalem mau berbagi bagaimana versi fixed dari sumber yg sama ;)) :">

Original Posted by Spyrestudios

Setelah membuka sumber tutorialnya nanti akan ada 3 buah demo. Nomor 3 ini yg ingin Beben bagi pada sobat² dan followers tercintaku :x :"> Setelah aku praktekan di blog dummy :D jadinya bisa sobat saksikan di RCTI saluran televisi kejuaraan sepak bola dunia (screenshot dibawah ini) ;))

Bahan-bahan untuk membuatnya...

1. Letakan CSS3 berikut diatas kode ]]></b:skin>
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 15px 35px 15px 15px;
font-weight: 700;
background:#333333 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(minus.png) 85% 55% no-repeat;
}
.panel {
position: fixed;
top: 80px;
right: 0;
display: none;
background: #aaa;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #fff;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: red;
text-decoration: none;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
}
Isikan tulisan yg berwarna merah dengan gambar yg bisa sobat dapatkan di gambarnyo.
2. Letakan script berikut diatas/sebelum tag </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
Jika sobat sudah memiliki script berwarna biru itu sudah tidak usah dimasukin lagi script tersebut. Minimal jQuery versi 1.3.2 :) Jadi sobat tinggal memasukkan script yg berwarna kuning saja :-bd
3. Masukkan kode HTML berikut didalam body sobat, bisa juga diatas tag </body>

<div class="panel">
ISIKAN KONTENNYA DISINI SOOOOBBB!!!
</div>
<a class="trigger" href="#">Your Title</a>

4. Save.
Selamat berkreasi sob, wassalam :-h salam blogger \m/