Implémentation du positionnement relatif JS CSS des compétences menu déroulant

Implémentation du positionnement relatif JS CSS des compétences menu déroulant_javascript

WBOY

Libérer： 2016-05-16 15:37:23

original

1575 Les gens l'ont consulté

L'exemple de cet article décrit le menu déroulant implémenté par le positionnement relatif JS CSS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le positionnement relatif est utilisé ici, mais l'effet n'est pas mauvais. Veuillez le modifier lorsque vous l'utilisez. Cela ne réalise que la fonction générale, et de nombreux détails n'ont pas été modifiés.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<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>

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.