Kali ini saya akan membahas tentang Jquery.
Teman-teman banyak yang bertanya,gimana cara bikin menu kayak punya mu ? :D
Nah,script di bawah silahkan di copy dan paste di tempatnya masing-masing.
<SCRIPT src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<SCRIPT src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js' type='text/javascript'/>
script diatas penting tuh,gunanya untuk memanggil Jquery online ;)
<SCRIPT type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel-a").show("slow");
$(".flip").hide("slow");
});
$(".flip-b").click(function(){
$(".panel-a").hide("slow");
$(".flip").show("slow");
});
});
</SCRIPT>
<STYLE type='text/css'>
div.panel-a,p.flip
{
cursor:pointer;
z-index:1000;
position:fixed;
top:20px;
overflow:auto;
margin:0px;
right:0px;
}
p.flip
{
text-align:center;
}
{
text-align:center;
padding:5px;
border:solid 1px #c3c3c3;
position:fixed;
top:0px;
overflow:auto;
margin:0px;
}
div.panel-a
{
padding:5px;
border:solid 1px #c3c3c3;
height:auto;
display:none;
}
div.flip-b
{
right:auto;
bottom:auto;
text-align:center;
padding:5px;
border:solid 1px #c3c3c3;
top:0px;
overflow:auto;
margin:0px;
}
</STYLE>
script diatas di taruh di antara <head> dan </head>
<DIV class='panel-a'>
<P>
<A href='http://jaluffy.blogspot.com/'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/home.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Photoshop'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/potosop.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Flash'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/flash.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Corel Draw'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/corel.png'/></a>
<A href='http://jaluffy.blogspot.com/search/label/JQuery'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/jquery.png'/></a>
<A href='http://jaluffy.blogspot.com/search/label/PHP'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/php.png'/></a>
</P>
<DIV class='flip-b'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/close.png'/></DIV>
</DIV>
<P class='flip'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/menu.png'/></P>
script diatas bisa 2 opsi,ditaruh di widget,atau ditaruh di antar <body> dan </body>,yang berwarna merah bisa diganti foto ataupun text ;)
Selamat mencoba !
Demo bisa dilihat di sini
4 comments:
ini gak ketutup tagnyah </a>
<A href='http://jaluffy.blogspot.com/search/label/Corel Draw'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/corel.png'/>
<A href='http://jaluffy.blogspot.com/search/label/JQuery'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/jquery.png'/>
<A href='http://jaluffy.blogspot.com/search/label/PHP'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/php.png'/>
satu lagi nih ...
delete script ini
<SCRIPT src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js' type='text/javascript'/>
sama itu jQuery juga, kalo mo lebih simple lagih ganti script jQuery inti nulisnya kek binih...
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
good luck
Makasih ya :D
Maklum,masih newbie og :)
Belajar Jquery aja masih otodidak :)
Thanks anyway :D
yang penting mau dan ada kemauan...
keep spirit my broooo \m/
Post a Comment