炫酷3D翻转侧边栏菜单特效

PetitQ 导航菜单 2018-10-20 2.62K 0 0

这是一款 jQuery 和 CSS3 炫酷 3D 翻转侧边栏特效。该侧边栏特效中，当用户点击了触发按钮之后，整个页面会 3D 翻转一定的角度，同时显示侧边栏，效果非常炫酷。

使用方法：

侧边栏的 HTML 结构如下：

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

```
<nav class="menu-activea">
```
```
  <h1>打开侧边栏</h1>
```
```
  <ul>
```
```
    <li>首页</li>
```
```
    <li>栏目一</li>
```
```
    <li>联系我们</li>
```
```
    <li>关于我们</li>
```
```
  </ul>
```
```
</nav>
```

作为打开侧边栏时，进行 3D 翻转的主体内容的 HTML 结构如下：

```
<main>
```
```
  <section>
```

    <!--这里放置你的页面内容--&t;

```
  </section>
```
```
</main>
```

CSS 样式：

该 jQuery 和 CSS3 3D 翻转侧边栏的主要 CSS 样式如下：

```
nav, main {
```

  transition: -webkit-transform 150ms ease-out;

```
  transition: transform 150ms ease-out;
```

  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;

```
}
```
```
 
```
```
nav {
```
```
  z-index: 100;
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  bottom: 0;
```
```
  width: 16em;
```
```
  background-color: #353441;
```
```
  -webkit-transform: translateX(-16em);
```
```
  transform: translateX(-16em);
```
```
}
```
```
 
```
```
nav.menu-active {
```
```
  -webkit-transform: translateX(0);
```
```
  transform: translateX(0);
```
```
}
```
```
 
```
```
nav.menu-hover {
```
```
  -webkit-transform: translateX(-15em);
```
```
  transform: translateX(-15em);
```
```
}
```
```
 
```
```
nav h1 {
```
```
  z-index: 100;
```
```
  display: block;
```
```
  position: absolute;
```
```
  top: 0;
```
```
  right: -60px;
```
```
  height: 60px;
```
```
  width: 60px;
```
```
  line-height: 60px;
```
```
  font-size: .8em;
```
```
  font-weight: 800;
```
```
  letter-spacing: 1px;
```
```
  color: #9DC6D1;
```
```
  text-transform: uppercase;
```
```
  text-align: center;
```
```
  background-color: #353441;
```
```
  cursor: pointer;
```
```
}
```
```
 
```
```
nav h1:hover {
```
```
  color: #353441;
```
```
  background: #fff;
```
```
}
```
```
 
```
```
nav ul {
```
```
  margin: 0;
```
```
  padding: 0;
```
```
}
```
```
 
```
```
nav li {
```
```
  display: inline-block;
```
```
  padding: 0 1em;
```
```
  width: 100%;
```
```
  height: 60px;
```
```
  color: #9DC6D1;
```
```
  line-height: 60px;
```
```
  background-color: #353441;
```
```
}
```
```
 
```

nav li:nth-of-type(2n) { background-color: #3a3947; }

```
 
```
```
nav li:hover { background: #fff; }
```
```
 
```
```
main {
```
```
  z-index: 0;
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  bottom: 0;
```
```
  right: 0;
```
```
  display: flex;
```
```
  align-items: center;
```
```
  overflow: hidden;
```
```
  background-color: #9DC6D1;
```
```
  -webkit-transform-origin: 0% 50%;
```
```
  transform-origin: 0% 50%;
```
```
}
```
```
main:after {
```
```
  content: '';
```
```
  display: block;
```
```
  position: absolute;
```
```
  z-index: 1;
```
```
  top: 0;
```
```
  left: 0;
```
```
  bottom: 0;
```
```
  right: 0;
```

  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(33, 33, 45, 0.5));

```
  visibility: hidden;
```
```
  opacity: 0;
```

  transition: opacity 150ms ease-out, visibility 0s 150ms;

```
}
```
```
main.menu-active {
```
```
  border-radius: .001px;
```

  -webkit-transform: translateX(16em) rotateY(15deg);

  transform: translateX(16em) rotateY(15deg);

```
}
```
```
main.menu-active:after {
```
```
  visibility: visible;
```
```
  opacity: 1;
```

  transition: opacity 150ms ease-out, visibility 0s;

```
}
```
```
main.menu-hover {
```
```
  border-radius: .001px;
```

  -webkit-transform: translateX(1em) rotateY(1deg);

  transform: translateX(1em) rotateY(1deg);

```
}
```
```
main section {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  bottom: 0;
```
```
  right: 0;
```
```
  margin: auto;
```
```
  padding: 1em 4em;
```
```
  max-width: 680px;
```
```
  overflow: auto;
```

  background-color: rgba(255, 255, 255, 0.5);

```
}
```

JavaScript 代码：

最后通过 jquery 代码来控制侧边栏的隐藏和显示。

```
(function() {
```
```
  var nav = $('nav'),
```
```
    menu = $('nav h1'),
```
```
    main = $('main'),
```
```
    open = false,
```
```
    hover = false;
```
```
  menu.on('click', function() {
```
```
    open = !open ? true : false;
```
```
    nav.toggleClass('menu-active');
```
```
    main.toggleClass('menu-active');
```
```
    nav.removeClass('menu-hover');
```
```
    main.removeClass('menu-hover');
```
```
    console.log(open);
```
```
  });
```
```
  menu.hover( 
```
```
    function() {
```
```
      if (!open) {
```
```
        nav.addClass('menu-hover');
```
```
        main.addClass('menu-hover');
```
```
      }
```
```
    }, function() {
```
```
      nav.removeClass('menu-hover');
```
```
      main.removeClass('menu-hover');
```
```
    }
```
```
  );
```
```
})();
```

该 jQuery 和 CSS3 3D 翻转侧边栏特效的 codepen 地址为：https://codepen.io/jscottsmith/pen/KppGrE

炫酷 3D 翻转侧边栏菜单特效

已有 656 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

炫酷3D翻转侧边栏菜单特效

使用方法：

CSS 样式：

JavaScript 代码：

炫酷 3D 翻转侧边栏菜单特效

相关文章

基于SVG的js圆形菜单插件

纯CSS3菜单汉堡包按钮变形动画特效

炫酷过渡动画隐藏侧边栏界面设计

发表回复取消回复

热销模板

导航菜单

使用方法：

CSS 样式：

JavaScript 代码：

炫酷 3D 翻转侧边栏菜单特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复