Membuat menu Rocking dan Rolling

Written By jendoang on Jumat, 17 Juni 2016 | 18.25

KONTAK SAYA

Email Twitter Facebook

BANTUAN

Buku Tamu Lapor Kritik dan Saran

TELUSURI

GALERI FOTO

Kategori Arsip Daftar Isi

MULAI DARI SINI

Pelayanan Portfolio Pembayaran

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/AVvXsEhztPc44NkEE7vWCGif7TsAR0vsaO-aaYTCxtCb3rR0VgxB8Wi9e-Jg1QpNvU3DFk3mJX7fc-X0OOPoEXTEgZ6bW3q-h-zG_9rcclg-HDQa3Wzwez1Npj7n5mVWQMwdsVQ4nXyfvW-0hLFD/s48-no/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkgFKK3eyBCNGl_A9avqXCpNyQxGZXtQMgjvNthGN2irkvF2xJ73TZrmC_eokPKAo9YtPbQSuunH3g8X9wCN6vmM3sy37nCJM_IEy-wH7FoqQVwuOLCOcYoVezoizfmcHdIr0IGeUJuwW/s48-no/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVfETrxiv2rSc80kfPcXseIRkSD_p97meA508NtA1xcAL3mo6lPxS4sauMFYXLlJNLi9Rr7KyNXa5Z7TFzAMyKzUl0D_iCjtMUvkrGMjWivlTSPGB5vm2C2-wMfcBTY0gUd9NDRjuOBbCR/s48-no/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp42N64nfL7gmg_mVJpdHChDM7ThGnAMGq_8Vmob9ySlexE6mtPkr_adgjGPp3jPG953JfxpxpV0G35JIfNPHqgTP_gFMA3y2-2Gw96xM9lcby5YFBhswP8nEc61zto59BRFhgPazZscSe/s48-no/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYS3O_KsfAhOpuVIYsRAQl68E1luC3tLi5sEPi4yEMij-aBeBvYgFYMnbzkxJBAglftX-_rcnqY_hSnyBJUj55906kiyWXH5MLr2LYwgvt5Os9GJIRDgjfgOJcG087Wnsi7COiKLOlS8K1/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>

Share this article :