UI实现分享：动态导航栏UI 实现分享: 动态导航栏
⽂章⽬录
正⽂
1. 实现效果
先来看看最终实现效果
静态图
动态效果
2. 实现细节
2.1 html 布局元素布局上⽐较简单，分成中⼼的 .toggle  元素，以及周围的 li  元素列表index.html
li  列表的部分我们稍微⽤⼀下 JavaScript 进⾏列表渲染
index.js 注意这⾥的 <ion-icon> 使⽤ cdn 的 webcomponent 图标导⼊在 <head> ⾥⾯贴上这两句就⾏了    <div id ="app ">      <ul class ="menu ">        <div class ="toggle ">          <ion-icon name ="add-outline "></ion-icon >        </div >      </ul >    </div >
1
2
3
4
5
6
7const  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 );});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2.2 元素定位
对于 UI 实现⽐较重要的部分在于 CSS 属性的设置，⾸先我们先来看布局、定位相关的
index.html
body 的部分设置⼀下渐层背景⾊
接下来分别定为⼀下整个导航栏的结构
Menu 为 200 * 200、然后使⽤ flex ⽔平垂直居中
中间的按钮为 60 * 60，然后使⽤ flex 使图标相对居中
2.3 导航栏列表项
接下来⽐较难的就是外围的导航栏列表项，⼀个⼀个定位未免太傻，所以我们使⽤ transform-origin + transform: rotate  的效果，制造出多个图标围绕同样⼀个中⼼进⾏旋转的效果（其中还使⽤ i  变量辅助计算）
<script  type ="module "  src ="unpkg/ionicons@5.5.2/dist/ionicons/ionicons.esm.js "></script ><script  nomodule  src ="unpkg/ionicons@5.5.2/dist/ionicons/ionicons.js "></script >
1
2
3
4
5
6
7
8body  {  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 ;}
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
1
2
3
4
5
6
同时由于每个⼩项是以外部点为中⼼旋转，⾃⾝还需要转回来来保证图标正向朝上
2.4 动画效果
最后再来实现动画效果⾸先先对中⼼点加个点击事件来开关 active  属性
这⾥加了个计时器，整个动画⼤概会持续 1.3 秒，动画结束前不让再次点击中⼼点旋转 315 度，使 + 符号旋转后变成 x
接下来是列表项，⼀开始我们先将每个项隐藏在中间的⼤按钮后⾯，然后点击后旋转透出.menu li  {  position : absolute ;  left : 0;  list-style : none ;  transform-origin : 100px ;  transform : rotate (calc (360deg / 8 * var (--i )));  z-index : 1;}
1
2
3
45
6
7
1
2
3
4
5
6
7const  menu = document .querySelector ('.menu');const  toggle = document .querySelector ('.toggle');let  disable = false ;toggle .addEventListener ('click', () => {  // le('active');  if  (!disable ) {    disable = true ;    menu .classList .toggle ('active');    setTimeout (() => {      disable = false ;    }, 1300);  }});
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
1
2
3
4
5js导航栏下拉菜单
6
7
8
9
10
11
2.5 hover 变⾊
hover 之后改变图标颜⾊就不⽤说啦
其他资源
参考连接
Title
Link Animated Circular Navigation Menu using Html CSS & Vanilla Javascript Simple Radial Menu
完整代码⽰例.menu.active li a:hover  {  color : #ff1252;}
1
2
3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。