?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

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.

Rounded Menu
Rocking and Rolling Rounded Menu with jQuery
#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(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;} 
#rocking-rolling .icon_mail   {background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;} 
#rocking-rolling .icon_help   {background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;} 
#rocking-rolling .icon_find   {background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;} 
#rocking-rolling .icon_photos {background:transparent url(http://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 + &quot;search/&quot;' 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>

    Ganti JUDUL MENU dengan judul menu yang kamu kehendaki, dan kode # dengan sebuah alamat URL. Sesuaikan Nama Menu dengan 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.

Terakhir Diperbaharui

    Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!