Menu และ Submenu
<script type="text/javascript">
function getposOffset(overlay, offsettype){
var totaloffset = (offsettype == "left")? overlay.offsetLeft : overlay.offsetTop
var parentEl = overlay.offsetParent
while (parentEl != null) {
totaloffset = (offsettype == "left")? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop
parentEl = parentEl.offsetParent
}
return totaloffset
}
var menutimedelay = 0
var menudisplay = ""
function menuoverlay(curobj, subobjstr) {
if (document.getElementById) {
if (menudisplay != "" & menudisplay != subobjstr) document.getElementById(menudisplay).style.visibility = "hidden"
menudisplay = subobjstr
var subobj = document.getElementById(subobjstr)
subobj.style.visibility = "visible"
var xpos = getposOffset(curobj, "left")
var ypos = getposOffset(curobj, "top")
/* คำนวณตำแหน่งของเมนูตรงกับด้านล่าง-ซ้าย */
subobj.style.left = xpos + "px"
subobj.style.top = ypos + curobj.offsetHeight + 2 + "px"
return false
}
}
/* หน่วงเวลาเพื่อซ่อนเมนู */
function menudelayHide(lyr) {
menutimedelay = setTimeout('document.getElementById("'+lyr+'").style.visibility="hidden"', 250)
}
/* หยุดการซ่อนเมนู */
function menuMouseover(lyr) {
if (menutimedelay > 0) clearTimeout(menutimedelay)
}
/* ซ่อนเมนูทันที */
function menuHide(lyr) {
document.getElementById(lyr).style.visibility = "hidden"
}
</script>
<style type="text/css">
a {
font-size:8pt;
font-family:Tahoma;
text-decoration:none;
}
ol.submenu {
list-style-type:none;
border:1px solid #aaaaaa; /* กรอบ sub เมนู */
background-color:#f0f0f0; /* สีพื้นของ submenu */
display:block;
position:absolute;
visibility:hidden;
}
ol.submenu li {
padding:2px 0 2px 0;
margin:0px;
}
ol.submenu a {
padding:2px 8px 2px 8px;
color:#aaaaaa; /* สีลิงค์ในเมนู */
}
ol.submenu a:hover {
padding:2px 8px 2px 5px;
border-left:3px solid gray; /* highlight เมื่อเมาส์อยู่บนเมนู */
color:#666666; /* สีลิงค์เมื่อเมาส์อยู่บนเมนู */
}
</style>
การใช้งาน ให้เขียนโค้ดทั้งส่วนเมนูบนและเมนูย่อย ดังข้างล่าง
เมนูบน
[ <a href="javascript:void(0)" class="menu" onmouseover="menuoverlay(this, 'submenu1')" onmouseout="menudelayHide('submenu1')">เมนู 1</a> ||
<a href="javascript:void(0)" class="menu" onmouseover="menuoverlay(this, 'submenu2')" onmouseout="menudelayHide('submenu2')">เมนู 2</a> ]
เมนูย่อย
<ol class="submenu" id="submenu1" onmouseover="menuMouseover('submenu1')" onmouseout="menudelayHide('submenu1')">
<li><a href="https://www.goragod.com" onclick="menuHide('submenu1')">g-O-r-a-g-o-d.com</a></li>
<li><a href="https://www.goragod.com/webdir/" onclick="menuHide('submenu1')">Web Directory</a></li>
</ol>
<ol class="submenu" id="submenu2" onmouseover="menuMouseover('submenu2')" onmouseout="menudelayHide('submenu2')">
<li><a href="http://mail.yahoo.com" onclick="menuHide('submenu2')">Yahoo !</a></li>
<li><a href="http://www.hotmail.com/webdir/" onclick="menuHide('submenu2')">Hot Mail</a></li>
</ol>
ส่วนสีแดงคือส่วนที่ต้องกำหนดให้สัมพันธ์กัน เพื่อใช้งาน เมนู
menuoverlay เพื่อแสดง submenu
menudelayHide หน่วงเวลาการซ่อน submenu เล็กน้อย
menuHide เพื่อซ่อน submenu
ตัวอย่าง