-->
 
Cara Membuat Animasi Menu Pull Up

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     
Gambarnya


Demonya

Animasi menu pullup

Menu Slide/Animation Pullup ini  menggunakan CSS3 dibuat untuk menghasilkan animasi dan transisi ketika Mouse diarahkan pada link atau gambar besar horisontal.
Gambar latar belakangnya dibagi menjadi tiga bagian gambar vertikal,Dan masing-masing gambar tersebut dibagi lagi menjadi tiga sebelum diupload dan dijadikan background. Gambar dapat shrink sebelum digantikan dengan tiga bagian gambar lainnya dan diikuti dengan menampilkan menu pullup yang dapat bergeser ke bawah di atas gambar dan berhenti membentuk kolom link. Setiap link telah dikaitkan dengan tiga gambar vertikal dengan dikombinasikan dalam satu bagian gambar besar

Langsung aja Sobat Perhatikan Kode dibawah ini
<style type="text/css">
/* ====================================
Styler : http://cuerosbhelatos.blogspot.com/
Don't Remove This Text
=====================================*/
.menuplus {width:600px; height:350px; padding:0; margin:30px; list-style:none; border-radius: 5px 5px 5px 5px;border: 4px inset red;  position:relative; z-index:100; background:#000; overflow:hidden;}
.menuplus li {float:left; height:400px;}
.menuplus ul {padding:0; margin:0; list-style:none; position:absolute; z-index:100; top:0; left:0;}
.menuplus ul ul {position:absolute; left:0; top:auto; bottom:900px; width:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menuplus ul li.p2 ul {left:200px;}
.menuplus ul li.p3 ul {left:400px;}
.menuplus img {width:200px; height:400px; position:absolute; display:block; opacity:1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.menuplus ul li {float:left;}
.menuplus ul img {width:0; height:0; top:200px; z-index:-1;}

.menuplus img.leftPic1 {left:0; top:0; width:200px; height:400px;}
.menuplus img.midPic1 {left:200px; top:0; width:200px; height:400px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus img.rightPic1 {left:400px; top:0; width:200px; height:400px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}

.menuplus ul img.set1a {top:150px;}
.menuplus ul img.set1b {top:150px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set1c {top:150px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}

.menuplus ul img.set2a {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set2b {top:250px;}
.menuplus ul img.set2c {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

.menuplus ul img.set3a {top:350px;transition-delay: 0.5s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menuplus ul img.set3b {top:350px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set3c {top:350px;}

.menuplus ul img.leftPic {left:100px;}
.menuplus ul img.midPic {left:300px;}
.menuplus ul img.rightPic {left:500px;}

.menuplus .menuInner {width:600px;}
.menuplus .menuInner li a {border-radius: 15px 15px 15px 15px;display:block; width:190px; height:30px; padding-left:10px; background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); margin-top:300px; font:bold 14px/30px Comic Sans MS, sans-serif; color:#300; text-align: center; text-decoration:none;}

.menuplus li:hover img.leftPic1 {left:100px; top:50px; height:0; width:0;}
.menuplus li:hover img.midPic1 {left:300px; top:50px; height:0; width:0}
.menuplus li:hover img.rightPic1 {left:500px; top:50px; height:0; width:0;}

.menuplus ul li:hover img.leftPic {left:0; top:0; height:400px; width:200px;}
.menuplus ul li:hover img.midPic {left:200px; top:0; height:400px; width:200px}
.menuplus ul li:hover img.rightPic {left:400px; top:0; height:400px; width:200px;}

.menuplus ul li:hover {zoom:1;}
.menuplus ul li:hover > a {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); color:#fff;}

.menuplus ul ul li {height:25px; float:left;}
.menuplus .menuInner ul li a {height:25px; line-height:25px; font-weight:normal; color:#fff;}
.menuplus ul li:hover ul {top:auto; bottom:400px;}
</style>

<div id="info">
<ul class="menuplus">
<li class="topLi"><a href="http://alamat blog sobat"></a>
<img alt="" class="leftPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/images.jpg" />
<img alt="" class="midPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofimages.jpg" />
<img alt="" class="rightPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofimages.jpg" />

<ul class="menuInner">
<li class="p1"><a href="http://alamat blog sobat">Game Zone</a>
<img alt="" class="leftPic set1a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0582-1.jpg" />
<img alt="" class="midPic set1b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/CopyofIMG_0582.jpg" />
<img alt="" class="rightPic set1c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofIMG_0582.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Action</a></li>
<li><a href="http://alamat blog sobat">Fantasy</a></li>
<li><a href="http://alamat blog sobat">Racing</a></li>
<li><a href="http://alamat blog sobat">Sport</a></li>
</ul>
</li>
<li class="p2"><a href="http://alamat blog sobat">Rooms &amp; Suites</a>
<img alt="" class="leftPic set2a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofWaterlilies.jpg" />
<img alt="" class="midPic set2b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy3ofWaterlilies.jpg" />
<img alt="" class="rightPic set2c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy4ofWaterlilies.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Sofware</a></li>
<li><a href="http://alamat blog sobat">Healthy</a></li>
<li><a href="http://alamat blog sobat">Special Breaks</a></li>
<li><a href="http://alamat blog sobat">News day</a></li>
<li><a href="http://alamat blog sobat">Chat Box</a></li>
</ul>
</li>
<li class="p3"><a href="http://alamat blog sobat">Tips &amp; Tricks</a>
<img alt="" class="leftPic set3a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Manga-Girl-Mysterious-Black-1-1.jpg" />
<img alt="" class="midPic set3b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofth_Manga-Girl-Mysterious-Black-1.jpg" />
<img alt="" class="rightPic set3c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofth_Manga-Girl-Mysterious-Black-1.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Tips Blogger</a></li>
<li><a href="http://alamat blog sobat">Tips Komputer</a></li>
<li><a href="http://alamat blog sobat">Tips Menipu Orang</a></li>
<li><a href="http://alamat blog sobat">Tips Merayu Cewek</a></li>
<li><a href="http://alamat blog sobat">Tips Bercinta</a></li>
<li><a href="http://alamat blog sobat">Tips Selingkuh</a></li>
</ul></li></ul></li></ul></div>


Mau Menu seperti ini
  • Login ke Blog Sobat
  • Masuk Rancangan Pilih Ad Gadget HTML/Java script
  • Copy Kode Diatas
  • Rubah Nama Menu- menunya dan alamat URLnya Pada Warna Biru Juga Gambar Backgroundnya Pada Kode warna kuning
  • Selanjutnya Klik Simpan dan Taruh Gadget tadi dibagian footer atau diatas body blog Sobat
  • Catatan tidak semua Template Bisa dipasang Menu ini
Selamat mencoba semoga bermanfaat
Posted On : 25 Oktober 2011 Time : 23.53
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |