Contoh Animasi Menu Full Up

Print this page

• 
  • Game Zone
    • Action
    • Fantasy
    • Racing
    • Sport
  • Rooms & Suites
    • Sofware
    • Healthy
    • Special Breaks
    • News day
    • Chat Box
  • Tips & Tricks
    • Tips Blogger
    • Tips Komputer
    • Tips Menipu Orang
    • Tips Merayu Cewek
    • Tips Bercinta
    • Tips Selingkuh

Kode yang digunakan untuk membuat contoh seperti di atas adalah :

<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> <br />
<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>

Artikel Terkait