让HTML二级下拉列表为网站锦上添花

2023-12-03 05:57:25

二级下拉列表简介

二级下拉列表，又称二级菜单，是一种常见的导航元素，通常用于为用户提供更多选项，而无需增加页面复杂性。它可以帮助用户快速找到所需信息，提高网站可用性和用户体验。二级下拉列表通常由一个主菜单和多个子菜单组成，当用户将鼠标悬停在主菜单项上时，子菜单就会展开，显示更多选项。

使用HTML、CSS和JavaScript创建二级下拉列表

要创建二级下拉列表，需要使用HTML、CSS和JavaScript三种技术。

HTML

<nav>
  <ul>
    <li><a href="#">主菜单项1</a>
      <ul>
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
        <li><a href="#">子菜单项1-3</a></li>
      </ul>
    </li>
    <li><a href="#">主菜单项2</a>
      <ul>
        <li><a href="#">子菜单项2-1</a></li>
        <li><a href="#">子菜单项2-2</a></li>
        <li><a href="#">子菜单项2-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav {
  width: 100%;
  background-color: #f2f2f2;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
}

a:hover {
  background-color: #ccc;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
}

ul ul li {
  display: block;
}

ul ul a {
  padding: 10px 15px;
}

ul ul a:hover {
  background-color: #ddd;
}

JavaScript

const nav = document.querySelector('nav');

nav.addEventListener('mouseover', (event) => {
  const target = event.target;
  if (target.tagName === 'A' && target.nextElementSibling && target.nextElementSibling.tagName === 'UL') {
    target.nextElementSibling.style.display = 'block';
  }
});

nav.addEventListener('mouseout', (event) => {
  const target = event.target;
  if (target.tagName === 'A' && target.nextElementSibling && target.nextElementSibling.tagName === 'UL') {
    target.nextElementSibling.style.display = 'none';
  }
});