Articles by "Menu"
Showing posts with label Menu. Show all posts

Cyber News di 0
Kali ini Saya akan memperkenalkan sebuah desain menu navigasi mahadahsyat yang dibangun dengan perpaduan antara JQuery dan CSS3. Sebenarnya saat ini Saya tidak tahu harus memberikan nama apa pada menu navigasi ini. Ada ide? Seperti biasa, Saya selalu mengusahakan untuk tidak menggunakan image sedikitpun dalam tiap-tiap desain Saya, contohnya seperti menu ini. Semuanya murni menggunakan CSS3 Box-Shadow dan CSS3 Gradient. Untuk easingnya sendiri Saya memakai perpaduan antara easing easeOutElastic pada pembukaannya dan easing easeInBack pada penutupannya. Penerapan easing ini secara dahsyat telah menciptakan efek elastik yang tampak seperti detak jantung:


jquery beautiful menu

Lihat Demo


Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Untuk membuatnya, pertama-tama kamu harus memanggil JQuery dan paket easingnya terlebih dahulu di sini » "Klik!"
Setelah itu salin kode ini, kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('ul#prikitiw ul li:odd').addClass('odd');
    $('ul#prikitiw li').hover(function() {
        $('ul',this).stop(true, true).show(1500,"easeOutElastic");
    }, function() {
        $('ul',this).stop(true, true).hide(450,"easeInBack");
    });
});
//]]>
</script>


Pemodelan

Berikutnya salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

/*
Copyright 10 Oktober 2011 :: Taufik Nurrohman
Tema: Jantung Hati
(http://hompimpaalaihumgambreng.blogspot.com)
*/

ul#prikitiw {
  list-style:none;
  margin:0;
  padding:3px 7px 4px;
  height:33px;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  background:rgb(211,87,190); /* Old browsers */
  background:-moz-linear-gradient(top, rgba(211,87,190,1) 0%, rgba(191,43,144,1) 50%, rgba(176,0,114,1) 51%, rgba(208,46,159,1) 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,87,190,1)), color-stop(50%,rgba(191,43,144,1)), color-stop(51%,rgba(176,0,114,1)), color-stop(100%,rgba(208,46,159,1))); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* Opera11.10+ */
  background:-ms-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d357be', endColorstr='#d02e9f',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* W3C */
  border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
  border:2px solid rgba(255, 255, 255, 0.9);
  -webkit-box-shadow:0 0 5px #B20375;
  -moz-box-shadow:0 0 5px #B20375;
  box-shadow:0 0 5px #B20375;
}

ul#prikitiw * {margin:0;padding:0;}

ul#prikitiw a {
  display:block;
  text-decoration:none;
  color:#7eb7fb;
}

ul#prikitiw li {
  position:relative;
  float:left;
}

ul#prikitiw ul {
  position:absolute;
  z-index:100;
  width:160px;
  top:30px;
  left:0;
  background-color:#fff;
  list-style:none;
  -webkit-box-shadow:0 0 5px #B20375;
  -moz-box-shadow:0 0 5px #B20375;
  box-shadow:0 0 5px #B20375;
  display:none;
}

ul#prikitiw ul li {
  position:relative;
  border:0;
  width:100%;
  margin:0;
}

ul#prikitiw ul li a {
  display:block;
  padding:5px 12px 5px;
  background-color:transparent;
  color:#D832AE;
}

ul#prikitiw ul li a:hover, ul#prikitiw ul li:nth-child(odd) a:hover {
  background-color:#D832AE;
  color:#fff;
}

ul#prikitiw .utama {
  padding:8px 14px 7px;
  font-style:italic;
  text-transform:uppercase;
  background:transparent;
  color:#fb9d9d;
  border-top:1px solid transparent;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
}

ul#prikitiw .utama:hover {
  background:rgb(146,28,114); /* Old browsers */
  background:-moz-linear-gradient(top, rgba(146,28,114,1) 0%, rgba(192,30,159,1) 51%, rgba(208,38,177,1) 55%, rgba(229,111,210,1) 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,28,114,1)), color-stop(51%,rgba(192,30,159,1)), color-stop(55%,rgba(208,38,177,1)), color-stop(100%,rgba(229,111,210,1))); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* Opera11.10+ */
  background:-ms-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#921c72', endColorstr='#e56fd2',GradientType=0 ); /* IE6-9 */
  background:linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* W3C */
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border-top:1px solid #E8B3D5;
}

ul#prikitiw li li:nth-child(odd) a, ul#prikitiw li.odd a {background-color:#FBF1F7;}


Kerangka Objek

Terakhir, letakkan kode ini di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='prikitiw'>

    <li><a href='#' class='utama'>BERANDA</a></li>

    <li><a href='#' class='utama'>PRIKITIW</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

    <li><a href='#' class='utama'>JURNAL</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

    <li><a href='#' class='utama'>KOMENTAR</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

</ul>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »
Klik Simpan Template.


Sedikit Penyesuaian

  • Setiap menu utama harus memiliki atribut class='utama' pada masing-masing elemen <a>nya.
  • Setiap unit menu terdiri dari satu buah menu utama dan beberapa buah submenu seperti ini:

    <li><a href='#' class='utama'>PRIKITIW</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

  • Ganti kode # dengan sebuah alamat URL, kemudian tentukan nama menu sesuka hati.
Continue reading

Cyber News di 0
Mungkin ini adalah satu-satunya tipe menu navigasi dengan efek paling aneh. Hanya dengan sebuah sentuhan saja dapat membuat menu ini tampil genit dan menari-nari. Saya rasa, menu navigasi ini berjenis kelamin wanita! Ayo kita cek sama-sama:

menu rocking rolling jquery


Lihat Jenis Kelamin


Versi asli menu navigasi ini sebenarnya menggunakan framework JQuery 1.5.2 sebagai mesinnya, namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik!

Untuk membuat menu navigasi seperti ini, pertama-tama pastikan bahwa templatemu sudah dilengkapi dengan JQuery versi 1.3.2 seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Jika templatemu sudah dilengkapi dengan script di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode </head>
Setelah itu salin script ini kemudian letakkan di bawah JQuery tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/jquery-animate-css-rotate-scale.js' type='text/javascript'></script> 
<script src='http://reader-download.googlecode.com/svn/trunk/jquery-css-transform.js' type='text/javascript'></script>


Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </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;
  -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; 
}


Terakhir tinggal meletakkan kerangka objeknya saja.
Salin kode ini, kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<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>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »
Klik Pratinjau untuk memastikan hasil tampilannya, atau langsung saja simpan templatemu. Sekarang kita masuk ke tahap penyesuaian.

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.



Continue reading
Subscribe to: Posts (Atom)