Kode yang digunakan untuk membuat Menu Rocking & Rolling seperti di atas adalah sbb :
<html>
<head> <script src='https://overlay-basic.googlecode.com/svn/branches/min.js' type='text/javascript'/></script> <script src='https://overlay-basic.googlecode.com/svn/branches/jquery-animate-css-rotate-scale.js' type='text/javascript'/></script> <script src='https://overlay-basic.googlecode.com/svn/branches/jquery-css-transform.js' type='text/javascript'/></script> </head> <style> #rocking-rolling{ width:auto; height:52px; text-align:left; font-family:"Trebuchet MS",sans-serif; font-size:16px; font-style:normal; font-weight:bold; text-transform:uppercase; } #rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{ /* netralisasi tampilan elemen heading, paragraf dan formulir */ margin:0 0 0 0; pading:0 0 0 0; border:none; background:transparent; } #rocking-rolling .item{ position:relative; background-color:#f0f0f0; float:right; width:52px; margin:0px 5px; height:52px; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden; } #rocking-rolling .link{ left:2px; top:2px; position:absolute; width:48px; height:48px; } #rocking-rolling .icon_home{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDf-kocebIV_tbCOYEmZl1zgnUzv0RNMrDbAcM4K_V3iqG50U2j189S08eix_cdcrJLnKpQ4OodJrdZ8UT9OuDiEZK5hjoMzDYzVtZP1C9XTTkFvVXDWDunKpumVIgDa5eS76NQPOnJeEV/s48-no/home.png) no-repeat top left; } #rocking-rolling .icon_mail{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvc9SnGuipwbZEJoVZ_BJzg5F5eIwi4TyALiZAoCFnCNQSFpxaLu_PD4cJnVTtaXM0oELq2m-YPuzaDlPGzV87dmHVKcV8_YuLjelKde8pa-YkQyiJtLnYhU5bMTVMTa_LRlcjYhIpHqK5/s48-no/mail.png) no-repeat top left; } #rocking-rolling .icon_help{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VyXBNwmtm9G1ZrehPj0R9CHBdDIsQv1H_yRdYaTxY41zqUpeK096H0K1KAtQ9sxZifsU1wYC34o6WV8HcKllgfqgd9Bvyb7ggy9tiTO4h8Gv5oeSufQdNVl270wxgARYkTwCLt5tjcpx/s48-no/help.png) no-repeat top left; } #rocking-rolling .icon_find{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjHXCt6cWorxy2CID3AlUo2jQO7yeEEcszYbXssT3-EGZML35OiO62qmkugRpaaLZryCyDYtoeDxPc2bjiSelhyphenhyphenP7gmkWzTZ_22CcvYEXBtJmhCEzumBrEZ-l3HoxOTnrFauKUzWR620B/s48-no/find.png) no-repeat top left; } #rocking-rolling .icon_photos{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ2yrE9G2W7kClWlEfeNHH-nufbFGlYluICMOpwKFtT3xt92lfr6zSDtBGqdWqgdkhdn_w-AXDFdw5o2NpoGQ1g6tk3LjTOyfhck2VKOQ0pCcTEP8kjDuL0h-R56B139XpMvLdiUEDYKxh/s48-no/photos.png) no-repeat top left; } #rocking-rolling .item_content{ position:absolute; height:52px; width:220px; overflow:hidden; left:56px; top:7px; background:transparent; display:none; } #rocking-rolling .item_content h2{ color:#aaa; text-shadow:1px 1px 1px #fff; background-color:transparent; font-size:14px; } #rocking-rolling .item_content a{ background-color:transparent; float:left; margin-right:7px; margin-top:3px; color:#bbb; text-shadow:1px 1px 1px #fff; text-decoration:none; font-size:12px; } #rocking-rolling .item_content a:hover{ color:#0b965b; } #rocking-rolling .item_content p{ background-color:transparent; text-transform:none; font-weight:normal !important; display:none; } #rocking-rolling .item_content p input{ border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } </style> <body> <div id='rocking-rolling'> <div class='item'> <a class='link icon_mail'></a> <div class='item_content'> <h2>KONTAK SAYA</h2> <p> <a href='#'>Email</a> <a href='#'>Twitter</a> <a href='#'>Facebook</a> </p> </div> </div> <div class='item'> <a class='link icon_help'></a> <div class='item_content'> <h2>BANTUAN</h2> <p> <a href='#'>Buku Tamu</a> <a href='#'>Lapor</a> <a href='#'>Kritik dan Saran</a> </p> </div> </div> <div class='item'> <a class='link icon_find'></a> <div class='item_content'> <h2>TELUSURI</h2> <p> <form expr:action='data:blog.homepageUrl + "search/"' method='get'><input name='q' type='text'/></form> </p> </div> </div> <div class='item'> <a class='link icon_photos'></a> <div class='item_content'> <h2>GALERI FOTO</h2> <p> <a href='#'>Kategori</a> <a href='#'>Arsip</a> <a href='#'>Daftar Isi</a> </p> </div> </div> <div class='item'> <a class='link icon_home'></a> <div class='item_content'> <h2>MULAI DARI SINI</h2> <p> <a href='#'>Pelayanan</a> <a href='#'>Portfolio</a> <a href='#'>Pembayaran</a> </p> </div> </div> <div style='clear:both;'></div> </div> <script type='text/javascript'> function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}) </script> </body> </html> |
Artikel Terkait
0 komentar
Posting Komentar