倾斜页面打开侧边栏菜单UI界面设计

PetitQ 导航菜单 2019-1-24 1.42K 0 0

这是一款效果使用 jQuery 和 CSS3 制作的倾斜页面打开侧边栏菜单 UI 界面设计效果。这个效果中，用户点击页面上的汉堡包按钮时，整个页面会向右倾斜一些角度，隐藏在左边的侧边栏被显示出来，整体效果非常炫酷。

HTML 结构

整个侧边栏使用一个 div.paper-back 作为包裹元素，里面是一个<nav>元素包裹一组菜单项<a>元素。其中 div.close 是关闭按钮。

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

```
<div id="paper-back">
```
```
  <nav>
```
```
    <div class="close"></div>
```
```
    <a href="#">Home</a>
```
```
    <a href="#">About Us</a>
```
```
    <a href="#">Our Work</a>
```
```
    <a href="#">Contact</a>
```
```
  </nav>
```
```
</div>
```

页面的内容部分使用嵌套<div>的 HTML 结构。div.hamburger 是汉堡包图标。每一个页面内容块使用一个<section>元素来制作。

```
<div id="paper-window">
```
```
  <div id="paper-front">
```

    <div class="hamburger"><span></span></div>

```
    <div id="container">
```
```
      <section>...</section>
```
```
      <section>...</section>
```
```
      ...
```
```
    </div>
```
```
  </div>
```
```
</div>
```

CSS 样式

侧边栏导航菜单的样式只是简单的将它固定定位定位，它的实际大小为整个视口的大小。

```
#paper-back {
```
```
  width: 100%;
```
```
  height: 100vh;
```
```
  background-color: #243040;
```
```
  position: fixed;
```
```
  top: 0;
```
```
  left: 0;
```
```
  font-size: 33px;
```
```
}
```
```
#paper-back nav {
```
```
  padding: 120px 34px;
```
```
}
```
```
#paper-back nav a {
```
```
  display: block;
```
```
  margin-bottom: 25px;
```
```
  text-decoration: none;
```
```
  color: rgba(255, 255, 255, 0.7);
```
```
}
```

内容部分的包裹元素 div#paper-window 的大小也是整个视口的大小，超出水平方向的部分被隐藏，并且定位方式为相对定位。

```
#paper-window {
```
```
  height: 100vh;
```
```
  width: 100vw;
```
```
  position: relative;
```
```
  overflow-x: hidden;
```
```
  overflow-y: scroll;
```
```
  z-index: 2;
```
```
}
```

实际用于制作页面倾斜效果的元素是 div#paper-front。它设置为相对定位，转换操作的中心原点被设置在 center 70%位置。

```
#paper-front {
```
```
  pointer-events: auto;
```
```
  position: relative;
```
```
  z-index: 3;
```
```
  background-color: white;
```

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);

```
  -webkit-transform-origin: center 70%;
```
```
      -ms-transform-origin: center 70%;
```
```
          transform-origin: center 70%;
```
```
  -webkit-transition: all 0.3s ease;
```
```
          transition: all 0.3s ease;
```
```
}
```

当页面处于倾斜状态时，div#paper-front 元素被动态添加 class tilt，这种状态下，它绕设定好的原点旋转 10 度，超出的部分会被隐藏。

```
#paper-window.tilt {
```
```
  overflow: hidden;
```
```
  pointer-events: none;
```
```
}
```
```
#paper-window.tilt #paper-front {
```

  -webkit-transform: rotate(10deg) translateZ(0);

          transform: rotate(10deg) translateZ(0);

```
}
```

具体 jQuery 实现代码非常简单，请参考下载文件。

倾斜页面打开侧边栏菜单 UI 界面设计

已有 355 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

倾斜页面打开侧边栏菜单UI界面设计

HTML 结构

CSS 样式

倾斜页面打开侧边栏菜单 UI 界面设计

相关文章

纯CSS3多级垂直导航菜单

折叠菜单追随鼠标烟花动画

紫色炫酷CSS3和SVG实现的圆环菜单动画

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

倾斜页面打开侧边栏菜单 UI 界面设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复