标签：rotate outline menu transform li toggle UI 分享 导航
UI 实现分享: 动态导航栏
文章目录
正文
1. 实现效果
先来看看最终实现效果
- 静态图
- 动态效果
2. 实现细节
2.1 html 布局
元素布局上比较简单，分成中心的 .toggle 元素，以及周围的 li 元素列表
index.html
<div id="app">
<ul class="menu">
<div class="toggle">
<ion-icon name="add-outline"></ion-icon>
</div>
</ul>
</div>
li 列表的部分我们稍微用一下 JavaScript 进行列表渲染
index.js
const menu = document.querySelector('.menu');
const items = [
'home-outline',
'person-outline',
'settings-outline',
'mail-outline',
'key-outline',
'videocam-outline',
'game-controller-outline',
'camera-outline',
];
items.forEach((type, i) => {
const li = document.createElement('li');
li.style = `--i: ${i}`;
li.innerHTML = `<a><ion-icon name="${type}"></ion-icon></a>`;
menu.appendChild(li);
});
注意这里的 <ion-icon> 使用 cdn 的 webcomponent 图标导入
在 <head> 里面贴上这两句就行了
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
2.2 元素定位
对于 UI 实现比较重要的部分在于 CSS 属性的设置，首先我们先来看布局、定位相关的
index.html
body 的部分设置一下渐层背景色
body {
width: 100vw;
height: 100vh;
margin: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(45deg, #8460ed, #ff1252);
display: flex;
justify-content: center;
align-items: center;
}
接下来分别定为一下整个导航栏的结构
Menu 为 200 * 200、然后使用 flex 水平垂直居中
.menu {
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
中间的按钮为 60 * 60，然后使用 flex 使图标相对居中
.toggle {
width: 60px;
height: 60px;
font-size: 2em;
z-index: 100;
}
2.3 导航栏列表项
接下来比较难的就是外围的导航栏列表项，一个一个定位未免太傻，所以我们使用 transform-origin + transform: rotate 的效果，制造出多个图标围绕同样一个中心进行旋转的效果（其中还使用 i 变量辅助计算）
.menu li {
position: absolute;
left: 0;
list-style: none;
transform-origin: 100px;
transform: rotate(calc(360deg / 8 * var(--i)));
z-index: 1;
}
同时由于每个小项是以外部点为中心旋转，自身还需要转回来来保证图标正向朝上
.menu li a {
width: 40px;
height: 40px;
font-size: 1.3em;
transform: rotate(calc(360deg / -8 * var(--i)));
color: #111;
}
2.4 动画效果
最后再来实现动画效果
首先先对中心点加个点击事件来开关 active 属性
const menu = document.querySelector('.menu');
const toggle = document.querySelector('.toggle');
let disable = false;
toggle.addEventListener('click', () => {
// menu.classList.toggle('active');
if (!disable) {
disable = true;
menu.classList.toggle('active');
setTimeout(() => {
disable = false;
}, 1300);
}
});
这里加了个计时器，整个动画大概会持续 1.3 秒，动画结束前不让再次点击
中心点旋转 315 度，使 + 符号旋转后变成 x
.menu.active .toggle {
transform: rotate(315deg);
}
接下来是列表项，一开始我们先将每个项隐藏在中间的大按钮后面，然后点击后旋转透出
.menu li {
transform-origin: 100px;
transform: rotate(0) translateX(80px);
transition-delay: calc(0.1s * var(--i));
transition-duration: 0.5s;
z-index: 1;
}
.menu.active li {
transform: rotate(calc(360deg / 8 * var(--i)));
}
2.5 hover 变色
hover 之后改变图标颜色就不用说啦
.menu.active li a:hover {
color: #ff1252;
}
其他资源
参考连接
| Title | Link |
|---|---|
| Animated Circular Navigation Menu using Html CSS & Vanilla Javascript | Simple Radial Menu |
完整代码示例
标签：rotate,outline,menu,transform,li,toggle,UI,分享,导航 来源： https://blog.csdn.net/weixin_44691608/article/details/121525547
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。