Baiklah kawan, sekarang kita menginjak ke tutorial terbagus dan terkeren, yaitu tutorial membuat menu selalu menggulir ke bawah maupun ke atas saat kita menggulirkannya ke bawah atau ke atas. untuk lebih jelasnya silahkan kawan-kawan kunjungi web blog kaskus atau untuk Demo Tutorial ini Lihat Disini atau Disini
Pada tutorial ini kita hanya memanfaatkan javascript dan CSS doang kawan memang benar-benar senjata terampuh para web programmer javascript dan CSS itu kawan, kemudian kondisi left dan top juga dicek, untuk nanti melakukan pergeseran ditempat yang sudah kita tetapkan....
bingung ya kawan? jangan binguuung, mudah koo', berikut ini langkah-langkahnya...
1. Buka Text Editor, seperti Notepad++ kesayanganku itu, kl blom punya NotePad++ silahkan Download Disini
2. Buka New File
3. Ketikkan Script JavaScript berikut ini kawan di bawah <header>
4. Setelah itu kita membuat DIV di bagian header, DIV disini nantinya yang akan digunakan untuk menjadi tempat bagi kita menaruh menu yang hendak dijalankan ke atas dan kebawah, atu ke kanan maupun ke kiri. ketik script berikut ini tepat dibawahnya tag html <body>
bingung ya kawan? jangan binguuung, mudah koo', berikut ini langkah-langkahnya...
1. Buka Text Editor, seperti Notepad++ kesayanganku itu, kl blom punya NotePad++ silahkan Download Disini
2. Buka New File
3. Ketikkan Script JavaScript berikut ini kawan di bawah <header>
<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=170;
layerheight=320;
halign="left";
valign="bottom";
delayspeed=3;
NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);
function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}
function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>
4. Setelah itu kita membuat DIV di bagian header, DIV disini nantinya yang akan digunakan untuk menjadi tempat bagi kita menaruh menu yang hendak dijalankan ke atas dan kebawah, atu ke kanan maupun ke kiri. ketik script berikut ini tepat dibawahnya tag html <body>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute;width:1800px;
left:'+floatX+'; top:'+floatY+';width:30%;margin-top:-150px;">');}
5. ketikkan kata atau menu yang akan selalu bergeser ke bawah dan ke atas tepatdibawah kode diatas. dalam hal ini aku menuliskan menu berikut ini
<div class="menujquery">
<div class="new">
<h2>Posting Terbaru <div class="tutup">x</div></h2>
<ul>
<li><a href="./isi.html">Membuat Menu Mengikuti Cursor Kebawah Seperti
Menu di Kaskus</li></a>
<li><a href="./isi1.html">Membuat Post Terbaru Keren di blog atau website
dengan CSS3 dan Jquery</a></li>
<li><a href="./isi2.html">Membuat Gambar Berputar di blog atau website
dengan CSS3 dan Jquery</a></li>
<li><a href="./isi3.html">Membuat Gambar Berputar di blog atau website dengan CSS3 dan Jquery</a></li>
</ul>
</div>
<div class="gambar">
<img src="./1.jpg" alt="Memutar Gambar dengan CSS3" />
<img src="./2.jpg" alt="Membuat Slide dengan CSS dan Jquery" class="g2" />
<img src="./3.jpg" alt="Membuat Menu Dropdown dengan Jquery" />
</div>
<div class="morelink">
<div class="isi"> </div> <div class="tutup1" style="margin-top:160px;
padding-right:5px;"><h3>closed</h3></div>
</div>
</div>
Kunjungi <a href=" http://download-aplikasinya.blogspot.com ">
http://download-aplikasinya.blogspot.com</a> <br /> <br /> <br /><br /><br />
<br /><br /><br />
6. kemudian, setelah itu. tutuplah DIV diatas dengan script java script berikut ini.
jadi, intinya, apa yang akan kita tamilkan akan ditaruh diantara script nomer 5 dan nomer 6.
berikut ini scriptnya
<script type="text/javascript">
if (NS4)
{
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>
7. Simpan file kawan-kawan.
8. Download Script lengkapnya DISINI
*Terus kunjungi ya blog tercinta kita ini karena pada tutorial berikutnya kita akan belajar bagaimana kita bermain-main dengan foto dan CSS3, menggunakan Image Spirite...
http://download-aplikasinya.blogspot.com/
http://download-aplikasinya.blogspot.com/
Post a Comment