HTML5手机移动端底部菜单动态切换特效代码

92建站   2021-11-12   收藏本文

这套HTML5手机移动端底部菜单动态切换特效代码,基于HTML5和SVG开发制作的,将宽必为AUTO就可以改为自适应的效果,这套手机底部图标菜单在导航切换时背景颜色也会哪着改变,非常的漂亮,想要开发手机端网站的朋友不要错过这套代码。

使用方法:

<script type="text/javascript">
    "use strict";
let body = document.body;
let menu = document.querySelectorAll(".menu__item");
let menuBorder = document.querySelector(".menu__border");
let active;

function clickItem() {
  active = document.querySelector("button.active");

  if (active) {
    active.classList.remove("active");
  }

  this.classList.add("active");
  let box = this.getBoundingClientRect();

  active = this;
  body.style.backgroundColor = active.style.getPropertyValue("--bgColorBody");

  offsetMenuBorder(box, menuBorder);
}

function offsetMenuBorder(box, menuBorder) {
  let left =
    Math.floor(
      box.left -
        menuBorder.closest("menu").offsetLeft -
        (menuBorder.offsetWidth - box.width) / 2
    ) + "px";
  menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}

menu.forEach((item) => {
  item.addEventListener("click", clickItem);
});
</script>

效果截图:

底部菜单代码,菜单切换代码,移动端菜单

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开