Cara membuat menu vertical JQuery drop down sebagai berikut seperti pada contoh blog saya disini
* Pertama login ke blogger
* Pilih rancangan masuk ke Edit HTML
* Cari kode <head>
* Masukkan kode JQuery dibawah ini sebelum atau diatas kode <head>
<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/vertical-menu/style.css' rel='stylesheet' type='text/css'/>
<script src='http://www.w3csolutions.com/website-resources/Vertical-Menu/jQuery-Menu/jquery-vertical-menu/jquery-vertical-menu/jquery-1.3.2.js' type='text/javascript'/>
* Cari kode <body>
* Letakkan kode dibawah ini sebelum atau diatas kode <body>
<div class='header'/>
<div class='scroll'/>
<ul id='navigation'>
<li class='home'><a href='http://shofitkj.blogspot.com' title='Home'/></li>
<li class='about'><a href='http://www.blogger.com/profile/04684443831004919264' title='About'/></li>
<li class='search'><a href='#' title='Search'/></li>
<li class='photos'><a href='#' title='Photos'/></li>
<li class='rssfeed'><a href='#' title='Rss Feed'/></li>
<li class='podcasts'><a href='#' title='Podcasts'/></li>
<li class='contact'><a href='#' title='Contact'/></li>
</ul>
<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
* Pratinjau dan lihat hasilnya
* Pertama login ke blogger
* Pilih rancangan masuk ke Edit HTML
* Cari kode <head>
* Masukkan kode JQuery dibawah ini sebelum atau diatas kode <head>
<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/vertical-menu/style.css' rel='stylesheet' type='text/css'/>
<script src='http://www.w3csolutions.com/website-resources/Vertical-Menu/jQuery-Menu/jquery-vertical-menu/jquery-vertical-menu/jquery-1.3.2.js' type='text/javascript'/>
* Cari kode <body>
* Letakkan kode dibawah ini sebelum atau diatas kode <body>
<div class='header'/>
<div class='scroll'/>
<ul id='navigation'>
<li class='home'><a href='http://shofitkj.blogspot.com' title='Home'/></li>
<li class='about'><a href='http://www.blogger.com/profile/04684443831004919264' title='About'/></li>
<li class='search'><a href='#' title='Search'/></li>
<li class='photos'><a href='#' title='Photos'/></li>
<li class='rssfeed'><a href='#' title='Rss Feed'/></li>
<li class='podcasts'><a href='#' title='Podcasts'/></li>
<li class='contact'><a href='#' title='Contact'/></li>
</ul>
<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
* Pratinjau dan lihat hasilnya
0 komentar:
Posting Komentar