GORAGOD.com

สร้างเมนู จากแอเรย์ หรือ ฐานข้อมูล (Javascript)

สร้างเมนูจาก Array โดยอาจเป็น Array ที่กำหนดไว้ หรือ query จากฐานข้อมูล เอามาใส่ไว้ในแอเรย์ก่อนก็ได้

<?
  $language=array("ไทย", "english"); //แอเรย์ของข้อมูล
?>
<!--รูปแบบการแสดงผลของเมนู เปลี่ยนแปลงเอาตามใจชอบ-->
<style>
#topmenu {
  border: 1px solid green;
  background-color: white;
  width: 150px;
  text-align: center;
}
#topmenu a {
  margin: 1px 1px 1px 1px;
  display: block;
  text-decoration: none;
}
#topmenu a:hover {
  background: #D3E4F5;
  border: 1px solid #167FB2;
  margin: 0px 0px 0px 0px;
  display: block;
}
#topmenu a.current {
  background: #D3E4F5;
  border: 1px solid #167FB2;
  margin: 0px 0px 0px 0px;
  display: block;
}

#submenu {
  position: absolute;
  border: 1px solid orange;
  background-color: white;
  display: none;
  width: 100px;
}
#submenu a {
  text-decoration: none;
  margin: 1px 1px 1px 1px;
}
#submenu a:hover {
  background: #D3E4F5;
  border: 1px solid #167FB2;
  margin: 0px 0px 0px 0px;
}
</style>

<!--พื้นที่ส่วนหัวเมนู-->
<div id=topmenu><a href="Javascript:overlay('topmenu', 'submenu')" onmouseover="doMouseover('submenu')">เลือกภาษา</a></div>
<!--พื้นที่รายการเมนู-->
<div id=submenu onmouseout="delayHide('submenu')" onmouseover="doMouseover('submenu')">
<table align=center width=100%>
<? //วนลูปลิสต์รายการจากแอเรย์ของข้อมูล (หรือจากฐานข้อมูล)
  foreach($language as $name=>$val) {
    echo "<tr><td align=center><a href='index.php?lang=$name'>$val</td></tr>";
  }
?>
</table>
</div>

ส่วนของ Javascript สามารถแยกออกเป็นไฟล์ .js ได้

<script language=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;
}

function overlay(curobjstr, subobjstr) {
  if (document.getElementById) {
    var subobj=document.getElementById(subobjstr)
    var curobj=document.getElementById(curobjstr)
    subobj.style.display=(subobj.style.display!="block")? "block" : "none"
    var xpos=getposOffset(curobj, "left")
    var ypos=getposOffset(curobj, "top")
    subobj.style.top=ypos+curobj.offsetHeight+2+"px"
    subobj.style.left=xpos-subobj.offsetWidth+curobj.offsetWidth+"px"
  };
}

var timedelay;

function delayHide(lyr) {
  timedelay=setTimeout('document.getElementById("'+lyr+'").style.display="none"', 330);
}

function doMouseover() {
  clearTimeout(timedelay);
}
</script>