easeOutElastic pada pembukaannya dan easing easeInBack pada penutupannya. Penerapan easing ini secara dahsyat telah membuat efek elastik yang tampak menyerupai detak jantung:
Langkah Pertama: Pemanggilan JQuery dan Paket Easing
Untuk membuatnya, pertama-tama kau harus memanggil JQuery dan paket easingnya terlebih dahulu di sini » "Klik!"Setelah itu salin arahan ini, kemudian letakkan sempurna 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 arahan CSS ini, kemudian letakkan sempurna di atas arahan]]></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 arahan ini di daerah dimana kau menginginkan sajian 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 sajian navigasi di sini »
Klik Simpan Template.
Sedikit Penyesuaian
- Setiap sajian utama harus mempunyai atribut
class='utama'pada masing-masing elemen<a>nya. - Setiap unit sajian terdiri dari satu buah sajian utama dan beberapa buah submenu menyerupai 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 arahan
#dengan sebuah alamat URL, kemudian tentukan nama sajian sesuka hati.