search

Home >Web Front-end >JS Tutorial >Javascript implements navigation menu effect with drop-down submenu_javascript skills

Javascript implements navigation menu effect with drop-down submenu_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:59:091057browse

本文实例讲述了javascript实现带下拉子菜单的导航菜单效果。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带下拉子菜单的导航菜单</title>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}
#menu ul li a#current { font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
<script type="text/javascript"><!--  //--><![CDATA[//><!--
function menuFix() {
  var sfEls = document.getElementById("menu").getElementsByTagName("li");
  for (var i = 0; i < sfEls.length; i++) {
    sfEls[i].onmouseover = function () {
      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";
    }
    sfEls[i].onMouseDown = function () {
      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";
    }
    sfEls[i].onMouseUp = function () {
      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";
    }
    sfEls[i].onmouseout = function () {
      this.className = this.className.replace(new RegExp("( &#63;|^)sfhover\\b"),
    "");
    }
  }
}
window.onload = menuFix;
//--><!]]>
</script>
</head>
<body>
<div id="menu">
<ul>
  <li><a id="current" href="#">首页</a></li>
  <li><a href="#">网页版式</a>
    <ul>
      <li><a href="#">自适应宽度</a></li>
      <li><a href="#">固定宽度</a></li>
    </ul>
  </li>
  <li><a href="#">web教程</a>
    <ul>
      <li><a href="#">新手入门</a></li>
      <li><a href="#">视频教程</a></li>
      <li><a href="#">常见问题</a></li>
    </ul>
  </li>
  <li><a href="#">web实例</a></li>
  <li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of AngularJS’s built-in filters_AngularJSNext article：Detailed explanation of AngularJS’s built-in filters_AngularJS

Related articles

See more