Cara Membuat CSS3 Drop Down Panel

CSS3 Drop Down Panel merupakan sebuah panel sentuh yang akan meluncur jatuh atau melorot ketika cursor menyentuh satu bagian tertentu yang merupakan bagian sensitif yang sengaja dibuat menjadi tempat khusus bagi "pengunjung blog yang suka meraba-raba" agar rabaan-nya nggak sis-sia dan satu helaan nafas panjang kelegaan akan terhembuskan ketika rangsangan yang berupa sentuhan tadi diberikan tepat pada sasarannya. He ... he ... Sampeyan jangan berpikiran jorok dengan membayangkan yang bukan-bukan! Melorot di sini bukan berarti celana, lho!? Wah ..., repot klo pikiran nyampe ke sono! Bisa gawat, mbul! Bukannya isi dalamnya jadi bisa di pelototi dan dinikmati serta dijelajahi titik demi titik, tapi ... e .... bisa-bisa yang di dalam justru pada rontok tersebar nggak karuan tertiup dengus nafas sampeyan yang ngos-ngosan, he ... he ...

CSS3 Drop Down Panel dapat digunakan untuk banyak fungsi yang berkaitan dengan fasilitas layanan untuk pengunjung blog, seperti "sarang menu", link sahabat, pusat informasi, iklan serta banyak yang lain. Drop Down Panel ini juga memanfaatkan css3 transition, sehingga ketika cursor menyentuh panel maka panel akan terbuka secara perlahan dan ketika cursor dilepaskan, maka panel akan tertutup pula secara perlahan seperti saat membuka. Pergerakan membuka dan menutupnya panel ini tak ubahnya seperti apabila kita gunakan javascript yang mampu menciptakan animasi gerak panel. Ya ... meskipun css3 transition ini hanya bekerja secara sempurna di Opera, Safari dan Google Chrome. Meskipun demikian kita tidak perlu berkecil hati atau kecewa, karena drop down panel ini dapat berfungsi secara normal di semua browser yang ada tanpa kecuali. Ya ... sekali lagi yang membedakan hanya pada masalah css3 transition dan kompabilitasnya terhadap browser yang saat ini digunakan. Tidak menjadi masalah besar, broer.

Bagaimana cara memasangnya di blog? Ouw .... Ditanggung nggak bikin pusing, broer! Sekali tempel langsung nyos! Lha gimana nggak gampang, wong kita bisa melakukannya hanya dengan memanfaatkan penambahan widget melalui "HTML/Javascript", ... copy-paste kode css, trus .... KLIK SAVE atau Simpan, dan ... byuh si drop down panel akan terlihat nongkrong di ujung teratas blog alias di header bagian atas. Ho ... ho ... Hanya butuh waktu 5 menit tak lebih dan satu penampilan baru dapat kita nikmati! Ho ... ho .... Nggak percaya? Yo ... bareng-bareng kita coba dan lihat hasilnya !

Kode CSS dan xHTML CSS3 Drop Down Panel

<style type="text/css">
#bokspanel {
 -moz-transition: all 2s ease-in-out;
 -webkit-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 transition: all 2s ease-in-out;
 background:#222 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgjqttV295H1.gif) top left repeat-x;
 height:284px;
 color: #fff;
 position: relative ;
 padding-top: 10px;
 margin-top:-300px; 
 border-left:2px solid red;
 border-right:2px solid red;
 border-bottom:8px solid red;
 border-top:none;
 border-bottom-left-radius:18px;
 border-bottom-right-radius:18px;
 -webkit-border-bottom-left-radius:18px;
 -webkit-border-bottom-right-radius:18px;
 -moz-border-radius-bottomleft:18px;
 -moz-border-radius-bottomright:18px;  
 }
.paneldalam { 
 background:#ddd url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bg3.png) bottom left repeat-x;
 background-position:0 110%;
 position: relative;
 margin-right: auto;
 margin-left: auto;
 width:880px;
 box-shadow:0 4px 6px #ddd;
 -moz-box-shadow:0 4px 6px #ddd;
 -webkit-box-shadow:0 4px 6px #ddd;
 border-bottom:2px solid #996633;
 border:2px solid #555;
 border-top:none;
 border-bottom-left-radius:8px;
 border-bottom-right-radius:8px;
 -webkit-border-bottom-left-radius:8px;
 -webkit-border-bottom-right-radius:8px;
 -moz-border-radius-bottomleft:12px 8px;
 -moz-border-radius-bottomright:12px 8px; 
 }
#bokspanel:hover{
 margin-top:0px;
 }
.paneltrigger:hover #bokspanel{
 margin-top: 0px; 
 }
#panelmenu{
 line-height: 0px;
 } 
#panelmenu .bokskiri {
 overflow:auto;
 float:left;
 width:260px;
 height:230px;
 border:1px solid #666;   
 padding:15px 6px;
 margin:5px;
 border-border-bottom-left-radius: 8px;
 -webkit-border-bottom-left-radius: 8px;
 -moz-border-radius-bottomleft: 8px;  
 }
#panelmenu .bokstengah {
 overflow:auto;
 float:right;
 width:286px;
 height:230px;
 border:1px solid #666;  
 padding:15px 6px;
 margin:5px;
 }
#panelmenu .bokskanan { 
 overflow:auto; 
 float:right;
 width:260px;
 height:230px;
 border:1px solid #666; 
 padding:15px 6px;
 margin:5px;
 border-border-bottom-right-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;  
 }
#panelmenu .bokskiri ul, #panelmenu .bokstengah ul, #panelmenu .bokskanan ul{
 margin:0;
 padding:0;
 list-style:none;
 }
#panelmenu .bokskiri li, #panelmenu .bokstengah li, #panelmenu .bokskanan li{
 margin:0;
 padding:0;
 list-style:none; 
 background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/DoubleRedArrow.gif) left top no-repeat;
 background-position:0 7px;
 border-bottom:1px dotted #555;
 }
#panelmenu .bokskiri li:hover, #panelmenu .bokstengah li:hover, #panelmenu .bokskanan li:hover {
 background-image: none;
 } 
#panelmenu .bokskiri li a, #panelmenu .bokstengah li a, #panelmenu .bokskanan li a{
 text-decoration:none;
 font:11px Tahoma;
 color: #fff;
 line-height:22px;
 padding-left:20px;
 }
#panelmenu .bokskiri li a:hover, #panelmenu .bokstengah li a:hover, #panelmenu .bokskanan li a:hover{    
 color:lime;
 }
a.paneltrigger {
 background:transparent;
 bottom:-50px;
 color:#000;
 display:block;
 font-size:18px Times;
 font-weight: bold;
 height:22px;
 padding:5px 10px 2px;
 position:absolute;
 right:150px;
 text-align:center;
 text-decoration:none;
 z-index:100;
 line-height: normal;
 border:2px solid red;
 border-top:none;
 border-bottom-left-radius:8px;border-bottom-right-radius:8px;
 -webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
 -moz-border-radius-bottomleft:12px 8px;-moz-border-radius-bottomright:12px 8px;
 box-shadow:0 6px 6px #888;
 -moz-box-shadow:0 6px 6px #888;
 -webkit-box-shadow:0 6px 6px #888;
 }
</style>

<div id="bokspanel">
<div id="panelmenu" class="paneldalam">

<div class="bokskiri">
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
    <li><a href="Link-10" target="_blank">Link Title-10</a></li>
    <li><a href="Link-11" target="_blank">Link Title-11</a></li>
    <li><a href="Link-12" target="_blank">Link Title-12</a></li>
    <li><a href="Link-13" target="_blank">Link Title-13</a></li> 
</ul> 
</div>

<div class="bokskanan">
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
</ul>
</div> 


<div class="bokstengah"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzDHAEll3KmBUD74xOOScUTV_ExIz3IKd_gISVjm1gZRGCgVHVKriCyiAdr0-AhYx6Aq6lSx-4CXseKo_0UJ2RUkQ90riuf3GqdSdGHI8aN6ay6eal7z4mvZLY6mkXWQ8Rk01hRgAoixA/s400/gubhugreyot200.24.jpg" /></div>
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
</ul>
</div>

<div style="clear:both;"></div>
<a href="#" class="paneltrigger">Daftar Menu</a>
</div>
</div>

Langkah pemasangan dan penyimpanan kode

1. Login : Login to BloGGeR (Login ke BloGGeR). Tuliskan User Name (Nama Pengguna) atau Email Address dan tuliskan juga Password sampeyan (Sandi).
2. Dasboard/DasborM : Setelah masuk di halaman dasbor, KLIK link "Design (Rancangan)".
3. Design (Rancangan) : KLIK "Add Gadget (Tambah Gadget)" yang terdapat dalam bingkai dengan garis terputus-putus.
4. Add a Gadget (Tambahkan sebuah Gadget) : Di sini akan terlihat beberapa widget yang mungkin ditambahkan di blog. Silahkan pilih dan KLIK "HTML/Javascript".
5. HTML/Javascript : Setelah terlihat box penambahan widget, copy-paste kode CSS dan xHTML, kemudian KLIK SAVE/Simpan.
6. Open Blog (Buka Blog) : Buka blog dan lihat hasilnya.

Catatan/Keterangan :

1. Ganti setiap link dengan URL menu dan Nama/Judul menu.
2. Sampeyan dapat menambah atau mengurangi jumlah menu untuk disesuaikan dengan kebutuhan blog.
3. Baik boks kiri, tengah atau kanan dapat difungsikan untuk hal lain diluar menu dengan merubah isi dalamya.
4. Lebar panel akan secara otomatis menyesuaikan diri dengan lebar blog.
5. Apabila ruang yang tersedia lebih kecil dari desain yang sudah dibuat, sampeyan dapat merubah ukuran box di setiap bagian. Perubahan ukuran lebar setiap box dilakukan dengan merubah nilai width pada :
   #panelmenu .bokskiri, #panelmenu .bokstengah dan #panelmenu .bokskanan, atau dengan hanya menggunakan #panelmenu .bokskiri dan #panelmenu .bokskanan serta mengatur lebarnya (width).
6. Untuk mengatur posisi panel trigger, dimana panel turun (membuka) atau naik (menutup) ketika cursor disentuhkan atau dilepas, di atur dengan merubah nilai :
   right:150px; pada a.paneltrigger
7. Semakin besar nilai right pada a.paneltrigger, maka panel trigger akan semakin ke kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

Apabila sampeyan ingin melihat bentuk dan kinerja CSS3 Drop Down Panel seperti yang tersebut di atas, silahkan buka demonya dengan KLIK link di bawah ini:

D E M O