Thaimisc.com : Popup Menu แบบมีปุ่มปิดเมนู
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
Popup Menu แบบมีปุ่มปิดเมนู
เขียนโดย Poj , 09-10-2007
ทำ Popup Menu แบบมีลิงค์สำหรับคลิกเพื่อปิดเมนู ดูตัวอย่างได้ ที่นี่ ครับ

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

<style>
td.top {
background-color: #000080;
text-align: right;
}

td.bottom {
background-color: #ffe38c;
padding: 15px;
}

</style>
<script>
var y1 = 100; // ตำแหน่งให้แสดงกล่องนับจากข้างบน (เลขยิ่งมาก ยิ่งอยู่ล่าง)
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
if (dom) {document.getElementById("layer1").style.visibility='hidden';}
if (document.layers) {document.layers["layer1"].visibility='hide';} }

function showIt() {
if (dom) {document.getElementById("layer1").style.visibility='visible';}
if (document.layers) {document.layers["layer1"].visibility='show';} }

function placeIt() {
if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.layers) {document.layers["layer1"].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.all) {document.all["layer1"].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
window.setTimeout("placeIt()", 10); }

window.onload=placeIt;
onResize="window.location.href = window.location.href"

</script>

 



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

<!-- ตั้งค่าขนาดหน้าต่างที่บรรทัดด้านล่างนี้ครับ
โดย left คือ ตำแหน่งจากด้านซ้าย (ยิ่งมากยิ่งซ้าย) ส่วนตำแหน่งจากด้านบนแก้ที่ด้านบนของ Code นี้
-->
<div id="layer1" style="position:absolute; left:185px; width:410px; height:10px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td class="top">
<a href="javascript:hideIt()" style="text-decoration: none"><font face="MS Sans Serif" size="2" color="#ffffff"><b>ปิดหน้าต่าง</b></font></a>
</td>
</tr>
<tr>
<td class="bottom">

<!-- เริ่มต้นใส่ Code ข้อความในกล่องที่นี่ -->
<font face="MS Sans Serif" size="1" color="#000080">
แสดงข้อความที่ต้องการที่นี่ครับ
</font>
<!-- สิ้นสุดการใส่ Code ข้อความในกล่องที่นี่ -->

</td>
</tr>
</table>
</font>
</div>
<form>
<input type="button" value="Open popup" onClick="showIt()">
</form>



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