Thaimisc.com : ทำลิงค์แบบคลิกแล้วมีเมนู Slide ลงมา
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำลิงค์แบบคลิกแล้วมีเมนู Slide ลงมา
เขียนโดย Poj , 09-10-2007
ทำลิงค์แบบคลิกแล้วมีเมนู Slide ลงมา ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<style type="text/css">

#coverlogin{
width: 320px;
height: 0.1em;
overflow:hidden;
visibility: hidden;
}
#loginbox{
width: 300px;
height: auto;
border: 1px solid red;
background-color: #FFCCFF;
color:black;
}
</style>
<script type="text/javascript">

var hh=0;
var inter;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==80)
{
clearInterval(inter);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

//same way as above but reversed
function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(inter);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}
</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<!-- set an interval for the increment of the height by clicking onto this link -->
<a href="#" onclick="inter=setInterval('ShowBox()',3);return false;">คลิ๊กที่นี่เพื่อแสดงข้อความ</a>
<div id="coverlogin">
<div id="loginbox">
ใส่ข้อความที่ต้องการได้ครับ <br>
<p align="right"><a href="#" onClick="inter=setInterval('HideBox()',3);return false;">ปิดกล่อง</a></p>
</div>
</div>


Credit : codetukyang
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com