Menu Lavalamp

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>