CSS Floating Menu plus css3 Effects

CSS Floating Menu ini telah dikembangkan dengan melibatkan kode css3 transition dan css3 transformation sehingga terlihat jauh lebih dinamis dibandingkan apbila kita hanya menggunakan kode css saja. CSS3 transition & css3 transformation difungsikan untuk menciptakan gerak animatif saat pemunculan menu sekaligus memberi efek animatif saat cursor menyentuh link menu. Penggunaan scroller dimaksudkan agar menu punya kapasitas daya tampung lebih (sebanyak anda suka).

D E M O

Cara membuat :

1. Login ke Blogger.
2. Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
3. Halaman baru kembali akan terlihat. Klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode "]]></b:skin>"
6. Copy dan pastekan kode css di atas kode "]]></b:skin>"
7. Klik "Simpan Template (Save Template)".
8. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
9. Selesai (Finish).

Kode CSS :

#GRboxfloatingmenu{
       position:fixed;
       top:100px;
       left:-360px;
       width:400px;
       height:150px;
       transition:0.8s ease-in 3s;
       -o-transition:0.8s ease-in 3s;
       -moz-transition:0.8s ease-in 3s;
       -webkit-transition:0.8s ease-in 3s;
       -ms-transition:0.8s ease-in 3s;
}
#GRboxfloatingmenu:before{
       position:absolute;
       top:55px;
       right:-55px;
       transform:rotate(-90deg);
       -o-transform:rotate(-90deg);
       -moz-transform:rotate(-90deg);
       -webkit-transform:rotate(-90deg);
       -ms-transform:rotate(-90deg);
       width:130px;
       height:40px;
       content:"Daftar Menu";
       background:rgba(0,0,0,0.5);
       color:#6FF;
       padding-left:20px;
       line-height:36px;
       font-size:18px;
       font-weight:bold;
}
#GRboxfloatingmenu:hover{
       left:0;
       z-index:9;
}
#GRboxfloatingmenu:hover,.floating-menu a{
       transition:0.8s ease-in;
       -o-transition:0.8s ease-in;
       -moz-transition:0.8s ease-in;
       -webkit-transition:0.8s ease-in;
       -ms-transition:0.8s ease-in;
}
.floating-menu{
       postion:absolute;
       right:-400px;
       top:0;
       border-top:40px solid #888;
       border-left:4px solid #666;
       border-right:4px solid #888;
       border-bottom:20px solid #666;
       background:#eee;
       width:320px;
       height:350px;
       z-index:100;  
       overflow:auto;
       color:#FFCC33;
       padding:20px 15px;
}
.floating-menu h3{
       font-size:16px;
       font-weight:bold;
       margin:3px 0;
       padding:3px 6px;
       background:#444;
}
.floating-menu a{
       display:block;
       padding:2px 6px;
       border-bottom:1px dotted #888;
       color:#111;
       font-family:Arial;
       text-shadow:2px 2px 2px #888;
       font-size:12px;
       text-decoration:none;
       line-height:20px;
}
.floating-menu a:hover{
       background:#930;
       color:#fff;
}

xHTML :

<div id="GRboxfloatingmenu">
<div class="floating-menu">
<h3>Judul Menu Pertama</h3>
<a href="Link_Menu-1">Menu-1</a>
<a href="Link_Menu-2">Menu-2</a>
<a href="Link_Menu-3">Menu-3</a>
<a href="Link_Menu-4">Menu-4</a>
<a href="Link_Menu-5">Menu-5</a>
<a href="Link_Menu-6">Menu-6</a>
<a href="Link_Menu-7">Menu-7</a>
<a href="Link_Menu-8">Menu-8</a>

<h3>Judul Menu Kedua</h3>
<a href="Link_Menu-1">CSS</a>
<a href="Link_Menu-2">HTML</a>
<a href="Link_Menu-3">Javascript</a>
<a href="Link_Menu-4">Adobe Photoshop</a>
<a href="Link_Menu-5">Animasi Gif</a>
<a href="Link_Menu-6">Menu Horisontal</a>
<a href="Link_Menu-7">Menu Vertical</a>
<a href="Link_Menu-8">Text Effects</a>
</div>
</div>

Catatan/Keterangan :

1. Jika anda membutuhkan panduan dan tutorial tentang cara "Backup Template", "Cara mencari kode html" dan berbaga "Cara menyimpan javascript, kode css dan xHTML", silahkan buka Special Tutorials di menu sebelah kiri halaman.
2. Link_Menu-1 s/d Link_Menu-8 merupakan URL setiap menu yang digunakan.
   Contoh menggunakan link:
   

   <a href="http://gubhugreyot.blogspot.com/2012/03/menampilkan-profil-pengunjung-dg-hover.html" title="Cara membuat hover efek untuk menampilkan gambar berbeda dengan css3">Cara menampilkan profil pengunjung..</a>

3. Untuk menambah daftar menu dilakukan dengan menambah xHTML :
   

   <h2>Judul Menu Kedua</h2>
   <a href="Link_Menu-1">CSS</a>
   ....
   ....
   <a href="Link_Menu-...">CSS</a>

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

Update » Jum'at    LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «