JS CSS relative positioning implementation of drop-down menu

JS CSS relative positioning implementation of drop-down menu_javascript skills

WBOY

Release： 2016-05-16 15:37:23

Original

1592 people have browsed it

The example in this article describes the drop-down menu implemented by JS CSS relative positioning. Share it with everyone for your reference. The details are as follows:

Relative positioning is used here, but the effect is not bad. Please modify it when you use it. This only realizes the general function, and there are many details that have not been modified.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-ab-fix-menu-codes/

The specific code is as follows:

<html>
<head>
<title>非定位CSS+Js下拉菜单</title>
<style>
#menu {
  position: absolute;
  font-family: sans-serif;
  font-size: 9pt;
}
#menu li {
  float: left;
  list-style-type: none;
  width: 102px;
  background-color: skyblue;
  border: 1px solid #0066cc;
  text-indent: 0px;
  margin-left: 3px;
}
#menu li a {
  color: blue;
  text-decoration: none;
  width: 100%;
  display: block;
}
#menu li a:hover {
  color: white;
}
#menu li ul {
  background-color: skyblue;
  margin: 0px;
  padding: 0px;
}
#menu li ul li {
  padding: 0px;
  margin: 0px;
  float: none;
  list-style-type: none;
  width: 100px;
  text-indent: 0px;
  border: none;
}
#menu li ul li a{
  color: black;
  text-decoration: none;
}
#menu li ul li a:hover{
  color: black;
  background-color: aqua;
}</style>
<script language="javascript" type="text/javascript">
var t=false,current;
function SetupMenu() {
  if (!document.getElementsByTagName) return;
  items=document.getElementsByTagName("li");
  for (i=0; i<items.length; i++) {
   if (items[i].className != "menu") continue;
   thelink=findChild(items[i],"A");
   thelink.onmouseover=ShowMenu;
   thelink.onmouseout=StartTimer;
   if (ul=findChild(items[i],"UL")) {
     ul.style.display="none";
     for (j=0; j<ul.childNodes.length; j++) {
      ul.childNodes[j].onmouseover=ResetTimer;
      ul.childNodes[j].onmouseout=StartTimer;
     }
   }
  } 
}
function findChild(obj,tag) {
  cn = obj.childNodes;
  for (k=0; k<cn.length; k++) {
   if (cn[k].nodeName==tag) return cn[k];
  }
  return false;
}
function ShowMenu(e) {
  if (!e) var e = window.event;
  thislink = (e.target) &#63; e.target: e.srcElement;
  ResetTimer();
  if (current) HideMenu(current);
  thislink = thislink.parentNode;
  current=thislink;
  ul = findChild(thislink,"UL");
  if (!ul) return;
  ul.style.display="block";
}
function HideMenu(thelink) {
  ul = findChild(thelink,"UL");
  if (!ul) return;
  ul.style.display="none";
}
function ResetTimer() {
  if (t) window.clearTimeout(t);
}
function StartTimer() {
  t = window.setTimeout("HideMenu(current)",200);
}
window.onload=SetupMenu;
</script>
</head>
<body>
<h1>Menu Test</h1>
<ul id="menu">
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Products</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Support</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Employment</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Contact Us</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
</ul>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.