Menu Rocking and Rolling

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 masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* -------------------------
Farthanet
----------------------------------------------- */
.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/AVvXsEg64AG0MDg6xaBexigU5Lr1TiZhB0Vi6pEZ7Fl6W1hvsYLeuh4uLh5ND3NBfgUuaB3-rtO1QXidVG9u7hGLdSBiWSf20FbeQHSVJmgb6ry6wAqTOt3FU3vHmIMS-8IcLJpcBJyS5JSrChg/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-_zpx7494NNV7_l7ys0OyPdQEFLcNxlieE9UyjYgugRswB4jGQuJVETtxPZSwETdUuf5bWFf9rC1VxcpxkQb5vpOJlB3Aoi8zzCkoiCtx-DXxI9xR2P91t4jtfFh5qmLYz7JQ5mv9ks/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxU1DqI3tDDlEzJ3u6TbCeiKzJ9vmOnCSRQJxpDtU9DH251df8r7xvcGQtaAD4Y9-gTsUiv16xdCX7Yu9YnDUPZrdgEp8vF1phHNRvoak9_UDUDqs3KXR7puTPTOVExhX5fXt7xzyK6k8/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRIL9NBi01g1-H5LRveBBT435VUNs3_gpYew1ZN23gF04Xal1btOFJKkGWZak8PUmxOmyHejCsH-fiqsyClGBPOUT1uSAlpOkRpjts-NQ984oh41auJNQ1vnHm-Tav0zjOhvDHtrbx14/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAYU2vigLDLmrqXCYfBgyvKu0z20XvdGzTWYYdZggdfno5jF_dQN2NvrLnj20emOKVkfszRHC0XvtfCTzmeqO1x-dfRJQyXmYz7QV2ytnhaDbY_7mTFCjyAp8Ab6f771FDsga7vH4aI0/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.