Penyusunan dokumen perencanaan tahunan Desa atau sering disebut dengan
Dokumen RKP Desa. Pada postingan ini akan dibagikan terkait dengan dokumen
RKP Desa ...
Membuat Rounded Menu with jQuery
Dalam tutorial ini kita akan memanfaatkan menu yang sangat mengagumkan dengan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Kami akan membuat menu dengan ikon kecil yang akan berputar ketika melayang. Juga, kita akan membuat item menu memperluas dan mengungkapkan beberapa konten menu, seperti link atau kotak pencarian.
#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;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-webkit-box-shadow:1px 1px 3px #555;
-moz-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://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;}
#rocking-rolling .icon_mail {background:transparent url(https://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;}
#rocking-rolling .icon_help {background:transparent url(https://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;}
#rocking-rolling .icon_find {background:transparent url(https://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;}
#rocking-rolling .icon_photos {background:transparent url(https://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/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;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}<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>Tipografi Menu:
- Setiap unit menu navigasi R3MJ (Rocking Rolling Rounded Menu dengan JQuery) dapat didefinisikan sebagai berikut:
<div class='item'> <a class='nama_class'></a> <div class='item_content'> <h2>JUDUL MENU</h2> <p> <a href='#'>Nama Menu</a> <a href='#'>Nama Menu</a> <a href='#'>Nama Menu</a> </p> </div> </div>
GantiJUDUL MENUdengan judul menu yang kamu kehendaki, dan kode#dengan sebuah alamat URL. SesuaikanNama Menudengan nama menu yang kamu inginkan. - Khusus untuk kotak penelusuran pada menu ini sudah Saya set agar dapat berfungsi pada situs-situs blogspot. Jika kamu bukan termasuk pengguna layanan blogspot, kamu harus mengganti kode yang Saya beri warna kelabu dengan elemen formulir kotak penelusuran posting di templatemu agar elemen tersebut bisa bekerja.
- Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area
<head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan<head>, namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.
Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.