Java+CSS3+HTML实现鼠标触碰下拉子菜单

本次实现的鼠标触碰下拉子菜单,鼠标离开后收缩子菜单功能使用了CSS第三代(CSS3)和JavaScript编程语言。其中,CSS3用了一些新的选择器和属性,如子选择器(>)、伪类(:hover)和过渡效果(transition),用来实现菜单的样式和动画效果。JavaScript部分则用了事件监听器和DOM操作,用来实现菜单的交互功能。

HTML:

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

CSS:

JS:

// 获取菜单元素
var menu = document.querySelector('.menu');

// 获取所有菜单项
var menuItems = menu.querySelectorAll('li');

// 遍历菜单项
for (var i = 0; i < menuItems.length; i++) {
  // 获取当前菜单项的子菜单
  var subMenu = menuItems[i].querySelector('ul');
  
  // 如果当前菜单项有子菜单
  if (subMenu) {
    // 给当前菜单项添加鼠标触碰事件
    menuItems[i].addEventListener('mouseenter', function() {
      // 显示子菜单
      this.querySelector('ul').style.display = 'block';
    });
    
    // 给当前菜单项添加鼠标离开事件
    menuItems[i].addEventListener('mouseleave', function() {
      // 隐藏子菜单
      this.querySelector('ul').style.display = 'none';
    });
  }
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
css3前端

CSS3特效-鼠标经过图层上移并带阴影

2023-5-2 20:57:14

css3html5javascript前端

JS+CSS3+HTML5实现幻灯片功能

2023-5-2 21:21:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索