Menu Lavalamp

Tabel Konten
  1. Langkah Pertama: jQuery dan Plugin Easing 
jQuery - 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.

19 Komentar

  • Putra

    langsung dicoba di template responsive mas taufik, keren bget sumvaaah :-bd :-bd
    semoga ilmunya bertambaaaah terus dan sering2 share ke blog hehe \o/ \o/ \o/

  • Beben Koben

    ada yg baru tuh threaded commentnya bos ^_^
    plus emot, link gambar and youtube :D

  • Taufik Nurrohman

    @Beben Koben Sudah sempat lihat, yang dari BloggerItem kan? Sayangnya masih dikompres, jadi kurang nyaman saja. Selain itu, di forum ini sempat dijelaskan bahwa kode enkripsi itu sangat lambat http://css-tricks.com/forums/discussion/17062/solved-javascript-encryption :'(

  • Beben Koben

    @Taufik Nurrohman Sy sdh uncompress bos :D
    tapi bagian link image jd imagenya gak jalan euy!!!
    saya kagak ngarti, gmn tah bos, bs benerin gak scriptnya :p
    kontek2 yaaa...look my source brooo ;)

  • Beben Koben

    @Beben Koben Kelebihan yg dr Tien ini gak pakek Popup :p
    Jadi ya cepelti bloggel punya <3
    Mission complete. DONE.
    Fiuh capekkk :Ozz

  • Taufik Nurrohman

    @Beben Koben Jadi kok http://2.bp.blogspot.com/-mWHgwNYdb10/T4EG8BTJXSI/AAAAAAAACcw/BfocvKz2pV0/s1600/success.png Waktu itu memakai gambar bertipe apa, di sini cuma mendukung JPG, GIF, PNG dan BMP sesuai standar Blogger:

    Replace_Image_Ext = ['jpg', 'gif', 'png', 'bmp'];
    //(support: jpg, gif, png, bmp), only effect when Replace_Image_Link=true
  • Beben Koben

    Tapi ada bentrok sama script yg lain :D
    Apa karena di decrypt ya?
    Hauhauauhauha kacau **p

  • Beben Koben

    @Taufik Nurrohman Saya dah praktekan yg GIF,JPG, PNG dan jalan semua.
    Yg GIF jg jalan sama gerak2nya :D

  • Anonim

    Menunya sih muncul mas,tapi kenapa ya kok tidak berfungsi ?..
    :'( :'( :'(

  • Taufik Nurrohman

    @blogriefs Baca lagi pada langkah pertama. JQuery dan plugin easingnya sudah dipasang? :\

  • Unknown

    Ane dah coba pasang, tapi class selected'nya ga berfungsi kenapa sob...

    • Taufik Nurrohman

      Baca komentar di atas. Rata-rata masalahnya sama.

      • Unknown

        Alhamdulillah sudah berfungsi mas...ternyata script yg ada di menu vertical view pada sidebar yg mesti dihapus dulu...Thankz atas bantuannya..

        • MASTW

          mas, di blog saya menu yang verticalnya gak muncul, mas gmn cara mengatasinya ?

        • MASTW

          Mas, cara agar menu verticalnya berfungsi gmn ? apa yang perlu di modifikasi ?

  • Apung Lovers

    kak mau nanya!!!!

    kalo cara nyatuin menu horizontal sama header gimana ya???

    thanks :D

    • Taufik Nurrohman

      Cari kode ini:

            <b:section class='header' id='header-inner' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Kaze Kate (Header)' type='Header'/>
      </b:section>

      Nah, taruh menunya di bawahnya.

  • Unknown

    sukses berat dengan sedikit modifikasi :D :Q :-bd

Komentar telah ditutup.