魔法导航菜单-编程知识

魔法导航菜单

效果展示

在这里插入图片描述

CSS 知识点

使用 box-shadow 属性实现不定项曲面

整体页面布局

<div class="navigation"><ul><li class="active"><a href="#"><span class="icon"><ion-icon name="home-outline"></ion-icon></span></a></li><li><a href="#"><span class="icon"><ion-icon name="person-outline"></ion-icon></span></a></li><li><a href="#"><span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span></a></li><li><a href="#"><span class="icon"><ion-icon name="camera-outline"></ion-icon></span></a></li><li><a href="#"><span class="icon"><ion-icon name="settings-outline"></ion-icon></span></a></li><div class="indicator"><span></span></div></ul>
</div>

实现整体容器样式及图标元素样式

.navigation {width: 420px;height: 70px;background: #209cff;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);border-radius: 10px;
}.navigation ul {position: relative;display: flex;flex-flow: row wrap;width: 350px;
}.navigation ul li {position: relative;list-style: none;width: 70px;height: 70px;z-index: 1;
}.navigation ul li a {position: relative;display: flex;justify-content: center;align-items: center;width: 100%;
}.navigation ul li a .icon {position: relative;display: block;font-size: 1.5em;color: #fff;line-height: 70px;opacity: 0.75;transition: 0.5s;
}.navigation ul li.active a .icon {opacity: 1;color: #209cff;transform: translateY(-8px);
}

实现滑动块样式

.indicator {position: absolute;top: -10px;width: 70px;height: 70px;background: var(--clr);border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;border: 6px solid var(--clr);cursor: pointer;transition: 0.5s;
}.indicator::before {content: "";position: absolute;top: 4px;left: -25.75px;width: 20px;height: 20px;background: transparent;border-top-right-radius: 16px;box-shadow: 4px -6px 0 2px var(--clr);
}.indicator::after {content: "";position: absolute;top: 4px;right: -25.75px;width: 20px;height: 20px;background: transparent;border-top-left-radius: 16px;box-shadow: -4px -6px 0 2px var(--clr);
}.indicator span {position: absolute;bottom: 0px;left: -1px;width: 60px;height: 60px;border: 4px solid #209cff;border-radius: 50%;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);transform: scale(0.85);
}

编写导航菜单项点击事件

let list = document.querySelectorAll(".navigation li");function activeLink() {list.forEach((item) => {item.classList.remove("active");this.classList.add("active");});
}list.forEach((item) => {item.addEventListener("click", activeLink);
});

编写导航菜单项滑块移动样式

.navigation ul li:nth-child(2).active ~ .indicator {transform: translateX(calc(70px * 1));
}.navigation ul li:nth-child(3).active ~ .indicator {transform: translateX(calc(70px * 2));
}.navigation ul li:nth-child(4).active ~ .indicator {transform: translateX(calc(70px * 3));
}.navigation ul li:nth-child(5).active ~ .indicator {transform: translateX(calc(70px * 4));
}