APP环形导航菜单设计效果

PetitQ 导航菜单 2018-11-09 2.18K 0 0

这是一款基于 TweenMax 的炫酷手机 APP 环形导航菜单设计效果。该环形菜单默认为一个汉堡包按钮，当用户点击按钮时，子菜单会一个接一个绕着汉堡包按钮出现，效果非常酷。

使用方法：

该环形菜单特效的 HTML 代码非常简单，如下：

也想出现在这里？联系我们吧

```
<div class="bg"></div>
```
```
<div class="phone">
```
```
  <div class="screen">
```
```
    <h1 class="hello">Welcome!</h1>
```
```
    <div class="nav">
```
```
      <a class="home" href="#">
```

        <img class="open" src="img/menu.svg" title="Menu" width="30">

        <img class="close" src="img/close.svg" title="Close" width="30">

```
      </a>
```

      <a class="item profile" href="#"><img src="img/user.svg" alt="User" width="25"></a>

      <a class="item like" href="#"><img src="img/heart.svg" alt="Like" width="25"></a>

      <a class="item message" href="#"><img src="img/message.svg" alt="Message" width="25"></a>

      <a class="item tools" href="#"><img src="img/tools.svg" title="Tools" width="25"></a>

```
    </div>
```
```
  </div>
```
```
</div>
```

CSS 样式：

.nav 元素是导航菜单，采用相对定位。它下面的每一个[a]元素都是一个圆形按钮，尺寸为 50 像素。

```
.nav {
```
```
  position: relative;
```
```
  top: 12px;
```
```
  left: 12px;
```
```
}
```
```
.nav a {
```
```
  width: 50px;
```
```
  height: 50px;
```
```
  border-radius: 50%;
```
```
  text-align: center;
```
```
  display: block;
```
```
  box-sizing: border-box;
```
```
  background-color: #FFFFFF;
```

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);

```
}
```
```
.nav a img {
```
```
  position: relative;
```
```
  top: 50%;
```
```
  transform: translateY(-50%);
```
```
}
```

a.home 元素是主菜单按钮。它的尺寸为 60 像素，使用绝对定位，位于左上角位置。其它的子菜单按钮使用绝对定位分布在它的周围。

```
.nav a.home {
```
```
  width: 60px;
```
```
  height: 60px;
```
```
  position: absolute;
```
```
  left: 0px;
```
```
  top: 0px;
```
```
  z-index: 2;
```
```
}
```
```
.nav a.home img { 
```
```
  position: relative;
```
```
  top: 50%;
```
```
  left: 50%;
```
```
  transform: translate(-50%, -50%);
```
```
}
```
```
.nav a.profile { 
```
```
  position: absolute;
```
```
  left: 113px;
```
```
  top: -5px;
```
```
}
```
```
.nav a.like {
```
```
  position: absolute;
```
```
  left: 115px;
```
```
  top: 59px;
```
```
}
```
```
.nav a.message {
```
```
  position: absolute;
```
```
  left: 65px;
```
```
  top: 106px;
```
```
}
```
```
.nav a.tools {  
```
```
  position: absolute;
```
```
  top: 114px;
```
```
  left: 0;
```
```
}
```

主菜单按钮中有两张图片，分别为汉堡包图片和关闭按钮图片。在主菜单按钮被激活的时候，会被添加.active class 类，此时关闭按钮图片被隐藏，反之显示关闭按钮图片。

.home:not(.active) .close, .home.active .open {

```
  display: none;
```
```
}
```

.home.active .close, .home:not(.active) .open {

```
  display: block;
```
```
}
```

JavaScript 代码：

特效中使用 TweenMax 来控制环形菜单的打开和关闭，为相应的元素添加和移除项的 class 类。

```
$(window).load(function() {
```
```
  var tl = new TimelineMax({
```
```
      paused: true
```
```
    }),
```
```
    tlback = new TimelineMax({
```
```
      paused: true
```
```
    }),
```
```
    intro = new TimelineMax();
```
```
 
```
```
  intro
```
```
    .from('.phone', 1, {
```
```
      autoAlpha: 0
```
```
    })
```
```
    .from('.hello', 0.5, {
```
```
      autoAlpha: 0
```
```
    }, 0.5)
```
```
 
```
```
  tl
```
```
    .to('.hello', 0.3, {
```
```
      autoAlpha: 0
```
```
    })
```
```
    .set('.home', {
```
```
      className: '+=active'
```
```
    })
```
```
    .set('.item', {
```
```
      scale: 1
```

    }) // fix for a bug when on of the item was appearing at 0.5 scale

```
    .to('.home', 0.1, {
```
```
      scale: 1.2,
```
```
      yoyo: true,
```
```
      repeat: 1
```
```
    })
```
```
    .to('.home', 0.3, {
```
```
      x: 20,
```
```
      y: 20,
```

      ease: Elastic.easeOut.config(1, 0.5)

```
    }, 0)
```
```
    .staggerFrom('.item', 0.7, {
```
```
      left: 20,
```
```
      top: 20,
```
```
      autoAlpha: 0,
```
```
      scale: 0.5,
```

      ease: Elastic.easeOut.config(1, 0.5)

```
    }, 0.1);
```
```
  tlback
```
```
    .set('.home', {
```
```
      className: '-=active'
```
```
    })
```
```
    .staggerTo('.item', 0.7, {
```
```
      left: 20,
```
```
      top: 20,
```
```
      autoAlpha: 0,
```
```
      scale: 0.5,
```

      ease: Elastic.easeOut.config(1, 0.5)

```
    }, 0.1)
```
```
    .to('.hello', 0.3, {
```
```
      autoAlpha: 1
```
```
    })
```
```
    .to('.home', 0.3, {
```
```
      x: 0,
```
```
      y: 0,
```
```
      ease: Power2.easeOut
```
```
    }, 0.5);
```

  $(document).on('click', '.home:not(.active)', function(e) {

```
    event.preventDefault();
```
```
    tl.play(0);
```
```
  });
```
```
 
```

  $(document).on('click', '.home.active, .item', function(e) {

```
    event.preventDefault();
```
```
    TweenMax.to($(this), 0.1, {
```
```
      scale: 1.2,
```
```
      yoyo: true,
```
```
      repeat: 1,
```
```
      onComplete: function() {
```
```
        tlback.play(0)
```
```
      }
```
```
    });
```
```
  });
```
```
});
```

APP 环形导航菜单设计效果

已有 545 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

APP环形导航菜单设计效果

使用方法：

CSS 样式：

JavaScript 代码：

APP 环形导航菜单设计效果

相关文章

CSS3悬停凸起菜单工具条特效

CSS3显示/隐藏侧边栏效果

蓝色的响应式下拉导航菜单栏

发表回复取消回复

热销模板

导航菜单

使用方法：

CSS 样式：

JavaScript 代码：

APP 环形导航菜单设计效果

相关文章

发表回复 取消回复

热销模板

发表回复取消回复