Sexy Vertical Sliding Panel jQuery

Semakin banyak kita melihat orang yang menggunakan panel geser horizontal di situs Web mereka. Dan mereka biasanya terlihat sangat bagus! Beberapa akan menaruh formulir kontak atau login di sana, orang lain akan menaruh beberapa informasi tentang mereka dan website mereka, atau bahkan hal-hal seperti awan tag atau tombol jaringan sosial.

Jadi, bagaimana dengan sebuah panel geser vertikal yang akan bertindak sebagai semacam laci bukannya geser horizontal panel atas biasa yang mendorong segala sesuatu ke bawah ketika membuka?. Sementara memikirkan alternatif untuk panel horizontal biasa, saya pikir akan menyenangkan untuk menciptakan sesuatu yang bekerja dengan cara yang sama, tapi itu adalah sedikit lebih fleksibel.

Inilah yang ada dalam pikiran blogger (klik untuk memperbesar atau periksa di bawah gambar untuk bekerja demo):

Pertama kita akan membuat markup, maka CSS dan kemudian kami akan menggunakan jQuery untuk membuka dan menutup panel vertikal kita geser. Berikut ini 3 demo yang berbeda:

1. Vertikal geser panel dan membuka / menutup memicu tombol di sebelah kiri dengan posisi absolut.
2. Vertikal geser panel dan membuka / menutup memicu tombol di kanan dengan posisi absolut.
3. Vertikal geser panel dan membuka / menutup memicu tombol di sebelah kiri dengan posisi tetap.

Berikut Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger :

1. Silahkan Login dan masuk pada Edit.
2. Tambahkan kode dibawah ini diatas kode </head> :

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>


3. Selanjutnya silahkan tambahkan kode dibawah ini pada bagian body :

<div id="sexy">
<div class="panel">
<h3>Sliding Panel</h3>
<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

<h3>A Little Something About Me</h3>
<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Navigation</h3>
<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
</ul>
</div>

<div class="colright">
<h3>Social Stuff</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>
</div>


4. Salin (copy) CSS dibawah ini kemudian letakkan (paste) pada bagaian CSS Blogger ( letekkan diatas kode ]]></b:skin> ) atau buat CSS Eksternal Blogger :


5. Ketika Anda akan melihat CSS pretty lurus ke depan. Anda juga akan melihat bahwa tombol memicu dan panel memiliki posisi absolut ke kiri. Ini akan menempatkan tombol dan panel di tepi kiri jendela browser. Klik di sini untuk melihat demo :

/* --------- Sliding Sexy --------- */

#sexy a:focus {
outline: none;
}

#sexy h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

#sexy h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

#sexy h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

#sexy img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

#sexy p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

#sexy img {
border:none;
}

#sexy #container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#sexy .content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

#sexy .content p {
margin: 10px 0;
padding: 15px 20px;
}

#sexy .panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

#sexy .panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

#sexy .panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

#sexy .panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

#sexy a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

#sexy a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 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(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

#sexy a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

#sexy .columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

#sexy .colleft{
float: left;
width: 130px;
line-height: 22px;
}

#sexy .colright{
float: right;
width: 130px;
line-height: 22px;
}

#sexy ul{
padding: 0;
margin: 0;
list-style-type: none;
}

#sexy ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

/* --------- Sliding Sexy --------- */

Jika Anda ingin menempatkan tombol memicu dan geser panel di sebelah kanan jendela, cukup mengedit a.trigger dan .Panel switch 'left' untuk 'right'. Contoh:

Dari :

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

Menjadi :

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

Dan juga pastikan untuk mengedit sudut dibulatkan dari ini:

Dari :

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

Menjadi :

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;

Klik di sini untuk melihat demo

Jika Anda ingin mendapatkan tombol memicu dan panel geser untuk selalu tetap terlihat saat Anda gulir ke atas dan ke bawah, mengubah posisi mutlak untuk posisi tetap, seperti ini:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Klik di sini untuk melihat demo

jika Anda ingin menghapus transparansi panel geser, cukup menghapus atau mengedit bagian CSS:

filter: alpha(opacity=85);
opacity: .85;

Selamat berkreasi semoga informasi ini bisa bermanfaat

Dari berbagai sumber