Shopify Dawn官方主题菜单导航点击下拉更改成悬浮下拉效果

最新推荐文章于 2024-08-09 16:24:01 发布

吖权（Leo）

最新推荐文章于 2024-08-09 16:24:01 发布

阅读量375

点赞数 3

分类专栏： Shopify 文章标签：运维 html 前端

本文链接：https://blog.csdn.net/hong_rui/article/details/135929952

版权

Shopify 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

Shopify Dawn官方主题菜单导航点击下拉更改成悬浮下拉效果

步骤

打开你shopify网站的代码编辑模式.
打开 header.liquid 文件（位于 sections 文件夹中).
添加一下代码到最底部 :

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>