Cara Membuat menu Lavalamp

Cara Membuat menu Lavalamp, ini merupakan menu navigasi yang menarik buat sobat coba. berikut Cara Membuat menu Lavalamp selengkapnya :

1. Copy kode CSS yang ada pada kotak dibawah kemudian paste di atas kode </b:skin>
2. Copy kode Javascript dan paste diatas kode </head>
3. Copy kode HTML kemudian paste pada Widget yang ada dibawah header dengan konten Tambah CSS/javascript atau letakan dalam edit HTML sesuai keinginan.

Untuk cara peletakan kode dalam template kawan bisa baca di Panduan Cara Meletakan Kode pada template

---

#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;}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script type="text/javascript">
<script src='http://elina.googlecode.com/files/jquery.easing.1.3.js.txt' type='text/javascript'/><script type="text/javascript">
//<![CDATA[
// Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
// Modified by : http://belajar-jq.blogspot.com
$(function() {
    $('#lava').append('<div id="box"><div class="head"></div></div>')
        .find('ul.fallback').removeClass('fallback');
    var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left),
        default_width = $('#lava li.selected').width();

    $('#box').css({left: default_left});
    $('#box .head').css({width: default_width});

    $('#lava > ul > li').mouseenter(function() {
      
        left = Math.round($(this).offset().left - $('#lava').offset().left);
        width = $(this).width();

        $('#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');

    }).click(function() {
        $('#lava li').removeClass('selected');
        $(this).addClass('selected');
    });

    $('#lava li').mouseleave(function() {
        $('ul', this).slideUp(600, 'easeOutQuart');
    }).parents('#lava').mouseleave(function() {
        default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
        default_width = $('#lava li.selected').width();
        $('#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>

<nav id='lava'>
    <ul>
        <li class='selected'><a href='#'>Beranda</a></li>
        <li><a href='#'>Menu</a></li>
        <li><a href='#'>Menu 1</a>
            <ul class='fallback'>
                <li><a href='#'>menu 1-1</a></li>
                <li><a href='#'>menu 1-2</a></li>
                <li><a href='#'>menu 1-3</a></li>
                <li><a href='#'>menu 1-4</a></li>
                <li><a href='#'>menu 1-5</a></li>
            </ul>
        </li>
        <li><a href='#'>Menu 2</a></li>
        <li><a href='#'>Menu 3</a></li>
        <li><a href='#'>Menu 4</a>
            <ul class='fallback'>
                <li><a href='#'>Menu 4-1</a></li>
                <li><a href='#'>Menu 4-2</a></li>
                <li><a href='#'>Menu 4-3</a></li>
                <li><a href='#'>Menu 4-4</a></li>
            </ul>
        </li>
    </ul>
</nav>

Semoga Cara Membuat Menu Lavalamp ini berhasil diterapkan pada template anda.

Rating: 5 Reviewer: Unknown