Membuat Menu Rocking and Rolling

hai sahabat blogger? gimana kabarnya ? semoga sehat selalu ya dan semoga tidak pernah bosan untuk membaca postingan saya, untuk sahabat blogger mungkin sudah tidak asing lagi mendengar kata menu navigasi, untuk postingan saya kali ini kita coba untuk membuat menu rocking & rolling. Menu ini sangat cocok buat sahabat-sahabat blogger yang suka mempercantik tampilan blognya, cara pembuatannya sangat mudah tinggal mengikuti langkah-langkah di bawah ini, yuk langsung kita mulai aja.

Seperti biasa saya nggak bosan-bosan untuk mengingatkan sebelum teman-teman mencoba tutorial ini mending kita lihat dulu demonya :

Nah sekarang kita buat menu seperti demo diatas.

• Seperti biasa masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* -------------------------amcied Logica----------------------------------------------- */.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;}.link{left:2px;top:2px;position:absolute;width:48px;height:48px;}.icon_home{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTwGz2dMOb_s2ielDEtKWWyx6fqQXKwiINikI-EJLACISU3KUxph8Le6Ztsazd1o3Lq4PiVi_4jz-jrQ2p-5Qngprs2i_UNvIhDGxRi5LUVG3QP9T87qZyOtmy5bGH7UM6dsj08QM-SA/s1600/home.png) no-repeat top left;}.icon_mail{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGk_JUZuugE0TBZHUIL2EoehbZOG6OD1S6xgaCNNgokpVpDbjW69yKOMQexkq-rNpuooBrMCX2sdzfLuiZiFGkZ7My0yMKLAFg9VktLZNSQ15xjSxgDpZSYqWagwKKkbJoUn0DvgO9gt0/s1600/mail.png) no-repeat top left;}.icon_help{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKi0ZGu0R6HHZ08bM8GlmReTm3VC1_lJ5EuGgeP5nhGSBcOAwzI45l0EViWiAGnPH6qAuPYzPPG-iGiOtuhGQDzth4p7NBsu3fEmAVa5M1-FJ77wtD3IQQSgQbtdls1uTfwsSexLds4w/s1600/help.png) no-repeat top left;}.icon_find{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB5YrBsWpnyferAEt2LHRKOqCMt1naG5x7_FBfOMCDX9dmbDOIKsLX2ksfLDEaJIlLa-fQkC-RUtQdNhJc5hBeS5fdWLWhRzwkiukgGHkGK5upJAC6ZN5XqSzXYyRtk15ZeU5s_YOQb7I/s1600/find.png) no-repeat top left;}.icon_photos{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmj868WsMBWotgn_b0BHPuqE1ca47Hx-mmhtotXZfUn5oh4W-_6PZOV2_VlB5HXqX5mOlpcyjDItYVbt7FLyM-WZAvf4N1dEbZzxJOmZeQ_uiP48ALpXkvxi_83P_BS0npDgt1qCAhk0/s1600/photos.png) no-repeat top left;}.item_content{position:absolute;height:52px;width:220px;overflow:hidden;left:56px;top:7px;background:transparent;display:none;}.item_content h2{color:#aaa;text-shadow: 1px 1px 1px #fff;background-color:transparent;font-size:14px;}.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;}.item_content a:hover{color:#0b965b;}.item_content p {background-color:transparent;display:none;}.item_content p input{border:1px solid #ccc;padding:1px;width:155px;float:left;margin-right:5px;}

• Selanjutnya copas lagi script di bawah ini di atas code </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script src="http://amcied.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script><script src="http://amcied.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script><script>$('.item').hover(function(){var $this = $(this);expand($this);},function(){var $this = $(this);collapse($this);});function expand($elem){var angle = 0;var t = setInterval(function () {if(angle == 1440){clearInterval(t);return;}angle += 40;$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);},10);$elem.stop().animate({width:'268px'}, 1000).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600);});}function collapse($elem){var angle = 1440;var t = setInterval(function () {if(angle == 0){clearInterval(t);return;}angle -= 40;$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);},10);$elem.stop().animate({width:'52px'}, 1000).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();}</script>

• Yang terakhir copas script di bawah ini di mana saja yang teman-teman suka, tapi di sini saya mencoba copas di HTML/JavaScript

<div class="item"><a class="link icon_find"></a><div class="item_content"><h2>Search</h2><p><input type="text" /><a href="">Go</a></p></div></div><div class="item"><a class="link icon_mail"></a><div class="item_content"><h2>Contact us</h2><p><a href="#">Facebook</a><a href="#">Twitter</a></p></div></div><div class="item"><a class="link icon_help"></a><div class="item_content"><h2>Help</h2><p><a href="#">FAQ</a><a href="#">Live Support</a><a href="#">About Us</a></p></div></div><div class="item"><a class="link icon_photos"></a><div class="item_content"><h2>Image Gallery</h2><p><a href="#">Photo Profil</a><a href="#">Images Archives</a></p></div></div><div class="item"><a class="link icon_home"></a><div class="item_content"><h2>Home</h2><p><a href="#">Kategori</a></p></div></div>

• Selesai, dan lihat hasilnya.

Selamat mencoba dan Semoga bermanfaat,...!!!

Ref >> http://rafiq-database.blogspot.com
salam IT Lovers...^_^