GORAGOD.com

โค้ด Drop Down เมนู

<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