js实现带圆角的多级下拉菜单效果

要实现带圆角的多级下拉菜单效果，需要使用HTML、CSS和JavaScript技术。

HTML部分

首先，在HTML中创建ul和li元素，代表菜单和菜单项。每个菜单项li需要设置一个唯一的id，同时在li中添加一个包含菜单项文本的a元素。同时，为了便于样式控制和避免全局污染，还可以给每个菜单一个独特的class。

CSS部分

菜单的样式设定需要涉及到多个方面，包括边框、背景、圆角和定位等。其中，可以使用CSS3的border-radius属性来实现圆角效果，例如： border-radius: 5px; 或者是 border-radius: 10px 10px 0 0;，前者是四个角都为5px的圆角，后者则是左上角和右上角为10px的圆角。

对于多级下拉菜单的定位，可以使用绝对定位或者css flex。绝对定位需要设置li父元素为position: relative，并对子菜单（即li元素中的ul元素）设置position: absolute，同时通过left和top属性来决定子菜单的位置。比如：

ul.dropdown > li {
  position: relative;
}

ul.dropdown li ul {
  position: absolute;
  left: 100%;
  top: 0;
}

另外，常见的下拉菜单展开效果为向下展开，因此需要为下拉菜单的ul元素设置一个向下三角符号，可以利用CSS3的border属性实现：

ul.dropdown li ul {
  border: none;
  border-top: 5px solid #ccc;
}

JavaScript部分

实现多级下拉菜单的关键在于设置菜单项的hover事件。当鼠标悬浮在父级菜单项上时，显示对应的子菜单，鼠标移出时则隐藏。为了能够控制多个子菜单，需要为每个菜单项添加mousein和mouseout事件，并且对每个子菜单进行单独控制。以下是一个简单的示例代码：

var dropdown = document.querySelector('.dropdown');
var menus = dropdown.querySelectorAll('li');

menus.forEach(function(menu){
  var submenu = menu.querySelector('ul');
  if (submenu) {
    menu.addEventListener('mouseenter', function(){
      submenu.style.display = 'block';
    });
    menu.addEventListener('mouseleave', function(){
      submenu.style.display = 'none';
    });
  }
});

以上代码中，首先选中了包含下拉菜单的顶层父级元素.dropdown，然后获取其中的所有子菜单li元素。接下来使用forEach循环遍历每个菜单项，如果它有下级菜单（即包含

示例说明

以下是两个实现带圆角多级下拉菜单效果的示例代码：

示例一

<ul class="dropdown">
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a>
        <ul>
          <li><a href="#">三级菜单一</a></li>
          <li><a href="#">三级菜单二</a></li>
        </ul>
      </li>
      <li><a href="#">子菜单三</a></li>
    </ul>  
  </li>
  <li><a href="#">菜单三</a></li>
</ul>

ul.dropdown {
  position: relative;
  display: inline-block;
}

ul.dropdown li {
  float: left;
  margin-right: 10px;
  position: relative;
  list-style: none;
}

ul.dropdown a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  border-radius: 5px;
}

ul.dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  border-radius: 0 0 5px 5px;
  background: #fff;
  padding: 0;
  margin-left: -10px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}

ul.dropdown ul li {
  float: none;
  padding: 5px 10px;
  margin-right: 0;
  position: relative;
}

ul.dropdown ul ul {
  top: 0;
  left: 100%;
  margin-left: 10px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}

ul.dropdown li:hover > ul {
  display: block;
}

var dropdown = document.querySelector('.dropdown');
var menus = dropdown.querySelectorAll('li');

menus.forEach(function(menu){
  var submenu = menu.querySelector('ul');
  if (submenu) {
    menu.addEventListener('mouseenter', function(){
      submenu.style.display = 'block';
    });
    menu.addEventListener('mouseleave', function(){
      submenu.style.display = 'none';
    });
  }
});

示例二

<ul class="dropdown">
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a>
        <ul>
          <li><a href="#">三级菜单一</a></li>
          <li><a href="#">三级菜单二</a></li>
        </ul>
      </li>
      <li><a href="#">子菜单三</a></li>
    </ul>  
  </li>
  <li><a href="#">菜单三</a></li>
</ul>

ul.dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.dropdown > li {
  position: relative;
  list-style: none;
}

ul.dropdown > li > a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
  border-radius: 5px;
}

ul.dropdown li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0 0 5px 5px;
  background: #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

ul.dropdown li ul li {
  position: relative;
  padding: 5px 10px;
}

ul.dropdown ul ul {
  top: 0;
  left: 100%;
  margin-left: 0;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

ul.dropdown li:hover > ul {
  display: block;
}

var dropdown = document.querySelector('.dropdown');
var menus = dropdown.querySelectorAll('li');

menus.forEach(function(menu){
  var submenu = menu.querySelector('ul');
  if (submenu) {
    menu.addEventListener('mouseenter', function(){
      submenu.style.display = 'block';
    });
    menu.addEventListener('mouseleave', function(){
      submenu.style.display = 'none';
    });
  }
});

以上两个示例分别使用了不同的菜单布局和聚合方式，但都是通过CSS3的border-radius属性设置的圆角效果，并在JavaScript中通过mouseenter和mouseleave事件来实现下拉菜单的显示和隐藏。可以根据自己网站需求和页面风格进行选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现带圆角的多级下拉菜单效果 - Python技术站

js实现带圆角的多级下拉菜单效果

相关文章