Langsung ke konten utama

Jquery Menu Lavalamp

Lavalamp 
Malam All
Jquery Menu Lavalamp
Menu salahsatu yang aku sukai pada sturktur template blogger , ibarat kata menu adalah penunjuk arah ketika kita ingin menelusuri sebuah situs/ blog. Diluar sana banyak tutorial menu yang ditawarkan dengan aneka ragam tampilan , mulai dari yang klasik sampe sang asyk. Kali ini saya akan menawarkan menu karyanya [ DTE ]


[-Kustomisasi-]
  • Cari kode </head> dan masukan kode dibawah ini tepat diatas kode </head> atau dibawah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>

  •  Sekarang cari kode ]]></b:skin> dan masukan kode dibawah ini tepat diatasnya
#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;}

  •  Dan kembali pada kode </head> , letakan kode ini tepat diatasnya
<script type="text/javascript">
//<![CDATA[
// Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
// Modified by Taufik Nurrohman: http://hompimpaalaihumgambreng.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>

  • Setelah selesai , silahkan sobat pasang kerangka menu dibawah ini dan tentukan dimana menu lavalamp akan diletakan 
 <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>

Perhatikan kode yang saya blok class='selected'  itu menentukan dimana lava akan berhenti.

Label:

Komentar

  1. AZLAJumat, Juni 21, 2013

    sepertinya Jquery Menu Lavalamp ini sangat bagus, dan tampilannya sangat jelas juga bisa mempermudah pengunjung utk memilij menu yg cocok.
    sungguh tutorial yg sangat menarik buat dicoba sobat
    terima kasih sudah berbagi

    BalasHapus
    Balasan
    1. Mas AndesSabtu, Juni 22, 2013

      akang ruly gitulohhh.. :D
      nih kalo ketahuan mas budi pasti langsung suruh nyimpen di kulkas kalo gak di angetin dulu mesti *hohoho

      Hapus
    2. Staff AdministratorSabtu, Juni 22, 2013

      Jiah..udah di serobot duluan sama mas Andes..
      Jadi binggung nih saya mau comen apaan...

      Haha...mas Andes lucu... :)
      Sumpahh....

      Hapus
    3. Sopala MultapaSabtu, Juni 22, 2013

      PP : jujur saya juga sangat suka sama menu ini
      Andes : so pasti sob .. ujng-ujung nya kena kulkas hehe
      mas bud : wkwkwkwkwk

      Hapus
  2. Mas AndesSabtu, Juni 22, 2013

    aduhhh akang ruly makin maknyus aja nih tutorialnya ditambah pake menu lavalamp jadi makin keren ueyy.. :)
    maaf nih baru bisa berkunjung kembali kang

    BalasHapus
    Balasan
    1. Staff AdministratorSabtu, Juni 22, 2013

      Cuma mav doang nih...martabak nya mana...hehe :)

      Hapus
    2. Sopala MultapaSabtu, Juni 22, 2013

      Andes : lumayan sob buat jaga-jaga hehe ( gak nyambung euy )
      Mas Bud : Kang dede tuh yg jualan martabak mas ..

      Hapus
  3. Belajar SEOSabtu, Juni 22, 2013

    wow keren sob , emang jquery ini top deh sampe bisa merubah menu seperti itu :D


    admin "Variasi Blogger"

    BalasHapus
  4. Staff AdministratorSabtu, Juni 22, 2013

    Selain jd penyiar radio..kang Ruly..hebring juga soal tutrial ya....
    Super keren euiyyy.. :)

    BalasHapus
    Balasan
    1. dedetea66Sabtu, Juni 22, 2013

      selain penyiar radi,Ruly itu nyinden juga mas Budi,kadang jualan beras huahahaha

      Hapus
    2. Sopala MultapaSabtu, Juni 22, 2013

      mas bud : alah pake apal hebring segala hihi ( tulisan euy nya salah mas )
      Dede : sampingan kang itu mah hehe

      Hapus
  5. dedetea66Sabtu, Juni 22, 2013

    hadeuhhh pelajaran yang kemaren saja belum bisa ,eh sekarang dikasih lagi pelajaran baru nih, heuheuheu

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya