Menu Lavalamp

Ini adalah perbaikan dari salah satu artikel yang sudah pernah Saya tuliskan sebelumnya. Hanya saja, karena versi yang lama tampak tidak begitu stabil jadi Saya memperbaikinya sekarang. Dengan beberapa drop-down menu tambahan yang sayangnya (menurut Saya) tidak begitu stabil. Seharusnya di sini kita memerlukan plugin hoverintent, tapi sudahlah. Artikel yang lama sudah Saya hapus T_T

Saya masih menggunakan kode dasar yang sama dari Quenees. Sedangkan inspirasi warna Saya ambil dari situs WebcamMax:

Lihat Demo

---

Langkah Pertama: jQuery dan Plugin Easing

Pertama-tama Anda harus memanggil jQuery dan plugin easing. Ambil kodenya di sini.

Jika sudah, segera temukan kode ini:

]]></b:skin>

Salin kode 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 kode 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 bar
    $('#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 bar position and width
    $('#box').css({left: default_left});
    $('#box .head').css({width: default_width});

    // if mouseover the menu item
    $('#lava > ul > li').mouseenter(function() {
        
        // Get the position and width of the menu item
        left = Math.round($(this).offset().left - $('#lava').offset().left);
        width = $(this).width(); 

        // Set the floating bar 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 menu
    }).click(function() {
        // reset the selected item
        $('#lava li').removeClass('selected');
        // select the current item
        $(this).addClass('selected');
    });

    // If the mouse leave the menu item,
    // hide the dropdown menu and reset the floating bar 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 bar 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 menu ini di tempat yang Anda inginkan (pelajari beberapa alternatif peletakkan menu 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 digunakan untuk menentukan dimana lava akan berhenti. Di sini Saya meletakkannya di menu Komentar, itulah sebabnya mengapa lava selalu berhenti pada menu Komentar.