仿ios菜单导航栏

模仿ios 菜单导航栏，点击菜单跳转

函数

  /**
         * @Description: 浮动菜单
         * @params: menus: Array 菜单列表   [ {name: '', href: "", icon: "" }]
         * @return: { }
         *  <div class="float-ball-box">
         <div class="float-ball-box-layer">
         <div class="menu-list">
         <div class="menu-item">
         <svg></svg>
         <div class="menu-text"></div>
         </div>
         </div>
         <div class="float-ball-content">
         <div class="float-ball-inner"></div>
         </div>
         </div>
         *
         */
        function floatMenuBall(menus = []) {
            var isOpen = false,
                htmlWidth = document.querySelector("html").offsetWidth,
                htmlHeight = document.querySelector("html").offsetHeight,
                left = htmlWidth - 40,
                top = htmlHeight * 0.5,
                menuWidth = htmlWidth * 0.5;
            //容器
            var floatBallBox = document.createElement("div");
            floatBallBox.setAttribute("class", "float-ball-box-uid124");
            var floatBallBoxLayer = document.createElement('div');
            floatBallBoxLayer.setAttribute("class", "float-ball-box-layer");
            //菜单
            var menuList = document.createElement('div');
            menuList.setAttribute("class", "menu-list");

            if (menus.length > 0) {
                menuList.style.width = menuWidth + "px";
                menuList.style.height = menuWidth + "px";
                menuList.style.top = top + "px";
                menuList.style.left = left + "px";
                menus.forEach(item => {
                    var menuItem = document.createElement("div"), text = document.createElement("div");
                    menuItem.setAttribute('class', "menu-item");
                    text.setAttribute('class', "menu-text");
                    menuItem.style.width = menuWidth * 0.48 + 'px';
                    menuItem.style.height = menuWidth * 0.48 + 'px';
                    text.innerText = item.name;
                    menuItem.innerHTML = item.icon;
                    menuItem.appendChild(text);
                    menuItem.addEventListener("click", function () {
                        if (item.href) {
                            location.href = item.href;
                        }
                    });
                    menuList.appendChild(menuItem);
                });
                floatBallBoxLayer.appendChild(menuList);
                floatBallBox.appendChild(floatBallBoxLayer);
            }
            //浮球
            var menufloatBallContent = document.createElement('div');
            menufloatBallContent.setAttribute("class", "float-ball-content");
            var floatBallInner = document.createElement('div');
            floatBallInner.setAttribute("class", "float-ball-inner");
            menufloatBallContent.appendChild(floatBallInner)
            floatBallBox.appendChild(menufloatBallContent);
            menufloatBallContent.appendChild(floatBallInner);
            floatBallBox.appendChild(menufloatBallContent);
            var cssStyle = document.createElement('style');
            cssStyle.type = 'text/css';
            cssStyle.innerHTML = '.float-ball-box-uid124{position:absolute;box-sizing:border-box}.float-ball-box-uid124 .float-ball-box-layer{position:fixed;top:0px;bottom:0px;left:0px;right:0px;z-index:999;touch-action:none;display:none}.float-ball-box-uid124 .float-ball-box-layer .menu-list{position:absolute;text-align:center;background:#fff;color:#fff;border-radius:10px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;align-self:stretch;animation:floatMenuListAnimation 300ms ease-in-out}.float-ball-box-uid124 .float-ball-box-layer .menu-list .menu-item{width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#575759}.float-ball-box-uid124 .float-ball-box-layer .menu-list .menu-item .menu-text{margin-top:5px}@keyframes floatMenuListAnimation{from{transform:scale(.1)}to{transform:scale(1)}}.float-ball-box-uid124 .float-ball-content{position:fixed;bottom:50%;right:0px;background:#999;width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:1000;user-select:none;opacity:.5}.float-ball-box-uid124 .float-ball-content .float-ball-inner{position:absolute;left:50%;top:50%;width:30px;height:30px;background:#fff;border-radius:50%;z-index:1001;transform:translate(-15px, -15px);opacity:.6}';
            document.getElementsByTagName('head')[0].appendChild(cssStyle);
            document.body.appendChild(floatBallBox);
            if (menus.length > 0) {
                floatBallBoxLayer.addEventListener("click", function () {
                    this.style.display = 'none';
                    isOpen = !isOpen;
                }, true);
                menufloatBallContent.addEventListener('click', function (e) {
                    isOpen = !isOpen;
                    floatBallBoxLayer.style.display = isOpen ? 'block' : 'none';
                    if (isOpen) {
                        var mTop = top - menuWidth / 2;
                        mTop = mTop < 0 ? 10 : mTop;
                        if (mTop + menuWidth > htmlHeight - 10) {
                            mTop = htmlHeight - 10 - menuWidth;
                        }
                        menuList.style.top = mTop + 'px';
                        menuList.style.left = htmlWidth / 2 - menuWidth / 2 + 'px';
                    }
                }, false);
            }
            menufloatBallContent.addEventListener("touchmove", function (e) {
                e.preventDefault();
                var target = e.targetTouches[0], div = this;
                left = (target.clientX - 20) < 0 ? 0 : (target.clientX - 20);
                if (left + 40 > htmlWidth) {
                    left = htmlWidth - 40;
                }
                top = (target.clientY - 20) < 0 ? 0 : (target.clientY - 20);
                if (top + 40 > htmlHeight) {
                    top = htmlHeight - 40;
                }
                div.style.top = parseFloat(top) + 'px';
                div.style.left = parseFloat(left) + 'px';
            }, false)
        }

html结构

<div class="float-ball-box-uid124">
	<div class="float-ball-box-layer">
		<div class="menu-list">
			<div class="menu-item">
				<svg></svg>
				<div class="menu-text"></div>
			</div>
		</div>
	<div class="float-ball-content">
		<div class="float-ball-inner"></div>
	</div>
</div>

css

.float-ball-box-uid124 {
  position: absolute;
  box-sizing: border-box;
}
.float-ball-box-uid124 .float-ball-box-layer {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 999;
  touch-action: none;
  display: none;
}
.float-ball-box-uid124 .float-ball-box-layer .menu-list {
  position: absolute;
  text-align: center;
  background: #fff;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  animation: floatMenuListAnimation 300ms ease-in-out;
}
.float-ball-box-uid124 .float-ball-box-layer .menu-list .menu-item {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #575759;
}
.float-ball-box-uid124 .float-ball-box-layer .menu-list .menu-item .menu-text {
  margin-top: 5px;
}
@keyframes floatMenuListAnimation {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}
.float-ball-box-uid124 .float-ball-content {
  position: fixed;
  bottom: 50%;
  right: 0px;
  background: #999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1000;
  user-select: none;
  opacity: 0.5;
}
.float-ball-box-uid124 .float-ball-content .float-ball-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  z-index: 1001;
  transform: translate(-15px, -15px);
  opacity: 0.6;
}