JavaScript实现伸缩二级菜单教程

JavaScript实现伸缩二级菜单教程

在网站开发中，好的导航菜单能够提高用户体验，二级菜单更是很常见的设计。本文将介绍如何使用JavaScript实现一个伸缩的二级菜单。

HTML结构：

<ul class="menu">
  <li>
    <a href="#">菜单1a>
    <ul>
      <li><a href="#">子菜单1a>li>
      <li><a href="#">子菜单2a>li>
      <li><a href="#">子菜单3a>li>
    ul>
  li>
  <li>
    <a href="#">菜单2a>
    <ul>
      <li><a href="#">子菜单1a>li>
      <li><a href="#">子菜单2a>li>
      <li><a href="#">子菜单3a>li>
    ul>
  li>
  <li><a href="#">菜单3a>li>
ul>

CSS样式：

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  position: relative;
  float:left;
}
.menu li ul {
  display:none;
  position: absolute;
  top: 100%;
  left: 0;
}
.menu li:hover > ul {
  display:block;
}

JavaScript代码：

window.onload = function() {
  var menu = document.getElementsByClassName('menu')[0];    // 获取导航菜单元素
  var menuItems = menu.getElementsByTagName('li');         // 获取菜单项元素
  for (var i = 0; i < menuItems.length; i++) {
    var subMenu = menuItems[i].getElementsByTagName('ul')[0]; // 获取子菜单元素
    if (subMenu) {
      // 给菜单项添加鼠标事件
      menuItems[i].onmouseover = function() {
        // 显示子菜单
        this.getElementsByTagName('ul')[0].style.display = 'block';
      };
      menuItems[i].onmouseout = function() {
        // 隐藏子菜单
        this.getElementsByTagName('ul')[0].style.display = 'none';
      };
    }
  }
};