Ini yaitu perbaikan dari salah satu artikel yang sudah pernah Saya tuliskan sebelumnya. Hanya saja, lantaran versi yang usang tampak tidak begitu stabil jadi Saya memperbaikinya sekarang. Dengan beberapa drop-down hidangan aksesori yang sayangnya (menurut Saya) tidak begitu stabil. Seharusnya di sini kita memerlukan plugin hoverintent, tapi sudahlah. Artikel yang usang sudah Saya hapus T_T
Saya masih memakai aba-aba dasar yang sama dari Quenees. Sedangkan pandangan gres warna Saya ambil dari situs WebcamMax:
Langkah Pertama: jQuery dan Plugin Easing
Pertama-tama Anda harus memanggil jQuery dan plugin easing. Ambil kodenya di sini.
Jika sudah, segera temukan aba-aba ini:
]]></b:skin>
Salin aba-aba di bawah ini dan letakkan di atasnya:
#lava { background-color:#274D5A; background-image:-webkit-linear-gradient(top,#274D5A,#1E3B45); background-image:-moz-linear-gradient(top,#274D5A,#1E3B45); background-image:-ms-linear-gradient(top,#274D5A,#1E3B45); background-image:-o-linear-gradient(top,#274D5A,#1E3B45); background-image:linear-gradient(top,#274D5A,#1E3B45); -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:relative; text-align:center; height:30px; } #lava ul { margin:0px 0px; padding:0px 0px; list-style:none; position:absolute; left:0px; top:0px; z-index:100; } #lava ul li { position:relative; float:left; } #lava ul li a { display:block; padding:0px 15px; font:bold 11px/30px Tahoma,Verdana,Arial,Sans-Serif; text-decoration:none; color:#70A4B2; text-shadow:0px -1px 0px rgba(0,0,0,0.4); } #lava #box { position:absolute; left:0px; top:0px; z-index:50; background-color:#1E3B45; background-image:-webkit-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-moz-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-ms-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-o-linear-gradient(bottom,#274D5A,#1E3B45); background-image:linear-gradient(bottom,#274D5A,#1E3B45); } #lava #box .head { height:30px; border-left:2px solid #AD1717; } #lava li ul { width:170px; height:auto; background-color:#274D5A; position:absolute; top:100%; left:0px; z-index:77; border-left:2px solid #AD1717; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); display:none; } /* CSS Fallback */ #lava li:hover ul.fallback {display:block;} #lava li li { float:none; display:block; text-align:left; } #lava li li a {padding:0px 15px;} #lava li li a:hover {background-color:#1E3B45;}Setelah itu temukan aba-aba ini:
</head>
salin script di bawah ini dan letakkan di atasnya:
<script> //<![CDATA[ // Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery // Modified by Taufik Nurrohman: http://dte-feed.blogspot.com $(function() { // Append the floating kafe $('#lava').append('<div id="box"><div class="head"></div></div>') // remove the fallback class if JavaScript enabled .find('ul.fallback').removeClass('fallback'); // Retrieve the selected item position and width var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left), default_width = $('#lava li.selected').width(); // Set the floating kafe position and width $('#box').css({left: default_left}); $('#box .head').css({width: default_width}); // if mouseover the hidangan item $('#lava > ul > li').mouseenter(function() { // Get the position and width of the hidangan item left = Math.round($(this).offset().left - $('#lava').offset().left); width = $(this).width(); // Set the floating kafe position, width and transition $('#box').stop(false, true).animate({left:left},{duration:1000, easing:'easeOutElastic'}); $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing:'easeOutElastic'}); $('ul', this).filter(':not(:animated)').slideDown(600, 'easeInOutExpo'); // if user click on the hidangan }).click(function() { // reset the selected item $('#lava li').removeClass('selected'); // select the current item $(this).addClass('selected'); }); // If the mouse leave the hidangan item, // hide the dropdown hidangan and reset the floating kafe to the selected item $('#lava li').mouseleave(function() { $('ul', this).slideUp(600, 'easeOutQuart'); }).parents('#lava').mouseleave(function() { // Retrieve the selected item position and width default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left); default_width = $('#lava li.selected').width(); // Set the floating kafe position, width and transition $('#box').stop(false, true).animate({left:default_left},{duration:1500, easing:'easeOutElastic'}); $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing:'easeOutElastic'}); }); }); //]]> </script>Terakhir, letakkan kerangka hidangan ini di daerah yang Anda inginkan (pelajari beberapa alternatif peletakkan hidangan navigasi horizontal di sini):
<nav id='lava'> <ul> <li><a href='#'>Beranda</a></li> <li><a href='#'>Profil</a></li> <li><a href='#'>Jurnal</a> <ul class='fallback'> <li><a href='#'>2007</a></li> <li><a href='#'>2008</a></li> <li><a href='#'>2009</a></li> <li><a href='#'>2010</a></li> <li><a href='#'>2011</a></li> <li><a href='#'>2012</a></li> </ul> </li> <li class='selected'><a href='#'>Komentar</a></li> <li><a href='#'>Kontak</a></li> <li><a href='#'>Cari</a> <ul class='fallback'> <li><a href='#'>CSS</a></li> <li><a href='#'>jQuery</a></li> <li><a href='#'>HTML</a></li> <li><a href='#'>JavaScript</a></li> </ul> </li> </ul> </nav>
Kode yang Saya beri tanda dipakai untuk memilih dimana lava akan berhenti. Di sini Saya meletakkannya di hidangan Komentar, itulah sebabnya mengapa lava selalu berhenti pada hidangan Komentar.