Cara Membuat Menu Tersembunyi dengan CSS3

Mungkin yang ini belum pernah sampeyan lihat karena barangnya benar-benar weton pabrik (keluaran pabrik). Masih kinyis-kinyis dan belom ada goresan sama sekali. Jika sampeyan sudah membuka Hidden Menu yang terpostingkan beberapa waktu yang lalu (menggunakan javascript), kini cobalah bandingkan dengan yang satu ini. Ho ... ho ... pasti sampeyan akan geleng kepala. Ya ..., karena yang satu ini biar tanpa secuilpun javascript akan tetapi mampu menampilkan sebuah bentuk slide menu dengan animasi yang sangat cantik. Secara keseluruhan tampilannya cukup jauh dengan yang pakai script tersebut. Yah ... ini memang kelebihan yang saat ini dimiliki CSS3. Banyak hal yang dulu nggak mungkin, kini bisa kita lakukan dengan amat baik. Sayangnya di IE semua animasi yang ada tak dapat tertampilkan sesuai harapan, yah ..., meski secara umum slide menu/box ini tetap mampu menjalankan peran utamanya sebagai sebuah box/menu tersembunyi. Tak apalah, toh ... tak lama lagi IE-pun pasti akan meluncurkan produk terbarunya yang mampu mengakomidir semua fungsi CSS3. Lhoh ... jelas, toh! Pastinya mereka nggak akan mau kehilangan daya saing dan pasar bisnis yang selama ini mereka raih dan sekaligus banyak menggelemmbungkan kantong mereka. Eman-eman kata wong Jowo.

Untuk membuat CSS3 Animated Slide Menu/Box yang tersembunyi di samping blog ini, kita dapat menyimpan seluruh kode CSS dan xHTML melalui penambahan widget (Add Gadget/Tambah Gadget), atau dengan cara menyimpan kode CSS-nya di template, sedang xHTML melalui penambahan widget. Sangat mudah dan pasti tak akan membutuhkan waktu lama. (He ... he ... yang lama membuatnya, ya , bung! He ... he ... ngabisin 7 piring nasi plus sambal sama tempe bacem 2 biji!).

Cara Membuat Menu/Box Tersembunyi (CSS3 Animated Slide Menu)

1. Login :Login to BloGGeR (Login ke BloGGeR).
• Tuliskan User Name (Nama Pengguna) atau gunakan Email Address
• Tuliskan juga Password (Sandi)
• Setelah pengisian dilakukan dengan benar, KLIK "Login".
• Tunggu beberapa saat hingga sebuah halaman baru terbuka. Halaman ini adalah "Halaman Dasboard (Dasbor).
2. Dasboard : Setelah masuk di halaman ini, carilah link "Design (Rancangan)". Silahkan KLIK untuk membukanya.
3. Design (Rancangan) : Di sini akan sampeyan jumpai "Page Element/Elemen Laman" yang merupakan bagian dari "Design/Rancangan". KLIK "Edit HTML"
4. Edit HTML : Di bagian inilah semua kode CSS akan di simpan. Carilah kode ]]></b:skin>, kemudian Copy-Paste kode CSS tepat di atasnya. Untuk kode CSS yang dikhususkan bagi Internet Explorer (IE) letakkan di bawahnya. Untuk mencari kode ]]></b:skin>gunakan Ctrl+F dengan cara di KLIK bareng. Dengan menggunakan Ctrl+F, maka pencarian kode menjadi lebih mudah dan cepat.
5. KLIK "SAVE Template (Simpan Template)".

Kode CSS "CSS3 Animated Slide Menu"

#sidemnu {
 background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueKilatH77V82.png) right top no-repeat;
 padding: 0;
 position: absolute;
 left: 0;
 width: 480px;
 margin-left: -400px;
 margin-top: 150px;
 -o-transition: all 3s ease-in;
 -moz-transition: all 3s ease-in;
 -webkit-transition: all 3s ease-in;
 opacity: 0.4;
 }
#sidemnu:hover {
 opacity: 1.0;
 -o-transform: translate(400px);
 -moz-transform: translate(400px);
 -webkit-transform: translate(400px);
 }
.GRmouseover {
 font: 19px Arial Narrrow;
 font-weight: bold;
 float: right;
 margin: 30px 10px 0 0;
 color: #FF0000;
 text-shadow: 0.01em 0.01em 0.2em #fff;
 -o-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease; 
 }
.GRmouseover:hover {
 -o-transform: scale(1.5) rotate(720deg) translate(0px);
 -moz-transform: scale(1.5) rotate(720deg) translate(0px);
 -webkit-transform: scale(1.5) rotate(720deg) translate(0px);
 color: #0000FF; 
 text-shadow: 1px 1px 2px #000; 
 background: #d3020c; padding: 0 8px;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px; 
 border: 1px solid #777; 
 }  
#sidemnu .boxdalam {
 padding:10px 5px;
 border: 1px solid #333;
 background: #bbdce9;
 width: 380px;
 border-radius: 12px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 box-shadow: 1px 1px 15px #000; 
 -moz-box-shadow: 1px 1px 15px #000; 
 -webkit-box-shadow: 1px 1px 15px #000; 
 } 
#sidemnu .boxdalam2 {
 width: 355px;
 color: #000066;
 font: 12px Arial;
 padding: 20px 10px;
 }
#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
#sidemnu .boxdalam h3 {
 font: 18px Droid Serif;
 font-weight: bold;
 color: #914c03;
 text-shadow: 0 1px 1px #fff;
 border-bottom: 1px dotted #555;
 border-top: 1px dotted #555;
 background: #a0cbdc;
 text-align: center; 
  }
#sidemnu .boxdalam li {
 background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/RedArrowH12V10.png) top left no-repeat;
 background-position: 0px 3px;
 border-bottom: 1px dotted #666;
 }
#sidemnu .boxdalam li:hover {
 background: none;
 } 
#sidemnu .boxdalam li a{
 padding-left: 20px;
 font: 12px Arial Narrow; 
 color: #000;
 text-shadow: 0px 1px 1px #fff;
 text-decoration: none; 
 }
#sidemnu .boxdalam li a:hover{
 color: #eee;
 background: #222;
 padding: 5px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; 
 text-shadow: 0px 0px 1px red;
 line-height: 20px;
 margin:0 10px;  
 }
#sidemnu .boxdalam img {
 padding: 2px;
 border: 6px solid #000;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -o-transition: all 3s ease;
 -moz-transition: all 3s ease;
 -webkit-transition: all 3s ease;
 opacity: 0.5;  
 }
#sidemnu .boxdalam img:hover {
 opacity: 1.0;
 }

]]></b:skin>

<!--[if IE]>
<style type="text/css">
#sidemnu{filter: alpha(opacity=50);}
#sidemnu:hover {filter: alpha(opacity=100);margin-left:0px;}
</style>
<![endif]-->

x HTML "CSS3 Animated Slide Menu"

<div id="sidemnu">
<div class="GRmouseover">MENU</div>
<div class="boxdalam">
<div class="boxdalam2" style="height:370px;overflow-y:auto;">

<h3>Tutorial Blogger</h3>

<ul>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-2" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-3" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-4" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-5" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-6" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-7" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Tips - Trik Blogger</h3>

<ul>
<li><a href="Link-8" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! </a></li>
<li><a href="Link-9" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-10" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-11" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-12" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-13" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-14" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Awas Bisa Merusak Mata...Terutama Mata Pencaharian</h3>

<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/3c6eae935ee89291d7aab06.jpg" style="margin:15px auto; width:300px;" />

<h3>sebuah percobaan yang harus di coba-coba</h3>

sebuah percobaan yang di coba-coba itu merupakan cobaan yang perlu dicoba, karena dengan mencoba anda akan tahu apa arti dari percobaan yang sedang anda coba dan akan mengetahui hasil dari percobaan itu akan membuahkan sebuah percobaan berikutnya untuk menjawab percobaan sebelumnya. jadi silahkan mencoba percobaan yang perlu anda coba walau itu hanya coba-coba. selamat mencoba.

</div>
</div>
</div>

xHTML disimpan melalui penambahan widget pada "Page Element (Elemen Laman)". Coba perhatikan langkah yang di atas, di sana ada langkah hingga "Page Element". Setelah sampai pada tahap tersebut,KLIK "Add Gadget (Tambah Gadget)" yang terdapat dalam box bergaris putus-putus. Sampeyan boleh pilih di sembarang Add Gadget. Setelah terlihat berbagai pilihan widget, KLIK "HTML/Javascript", kemudian tunggu beberapa saat. Setelah box penambahan widget terlihat, copy dan pastekan xHTML. Lanjutkan dengan KLIK "SAVE/Simpan".


Sumber: http://gubhugreyot.blogspot.com/2010/08/animated-slide-menu-box-using-css3.html