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.
sepertinya Jquery Menu Lavalamp ini sangat bagus, dan tampilannya sangat jelas juga bisa mempermudah pengunjung utk memilij menu yg cocok.
BalasHapussungguh tutorial yg sangat menarik buat dicoba sobat
terima kasih sudah berbagi
akang ruly gitulohhh.. :D
Hapusnih kalo ketahuan mas budi pasti langsung suruh nyimpen di kulkas kalo gak di angetin dulu mesti *hohoho
Jiah..udah di serobot duluan sama mas Andes..
HapusJadi binggung nih saya mau comen apaan...
Haha...mas Andes lucu... :)
Sumpahh....
PP : jujur saya juga sangat suka sama menu ini
HapusAndes : so pasti sob .. ujng-ujung nya kena kulkas hehe
mas bud : wkwkwkwkwk
aduhhh akang ruly makin maknyus aja nih tutorialnya ditambah pake menu lavalamp jadi makin keren ueyy.. :)
BalasHapusmaaf nih baru bisa berkunjung kembali kang
Cuma mav doang nih...martabak nya mana...hehe :)
HapusAndes : lumayan sob buat jaga-jaga hehe ( gak nyambung euy )
HapusMas Bud : Kang dede tuh yg jualan martabak mas ..
wow keren sob , emang jquery ini top deh sampe bisa merubah menu seperti itu :D
BalasHapusadmin "Variasi Blogger"
lumayan sob
HapusSelain jd penyiar radio..kang Ruly..hebring juga soal tutrial ya....
BalasHapusSuper keren euiyyy.. :)
selain penyiar radi,Ruly itu nyinden juga mas Budi,kadang jualan beras huahahaha
Hapusmas bud : alah pake apal hebring segala hihi ( tulisan euy nya salah mas )
HapusDede : sampingan kang itu mah hehe
hadeuhhh pelajaran yang kemaren saja belum bisa ,eh sekarang dikasih lagi pelajaran baru nih, heuheuheu
BalasHapusbiar cepet pinter kang ...
Hapus