导航菜单

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

阿里云


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

HTML 结构

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

也想出现在这里?联系我们
创客主机
  1. <div id="paper-back">
  2.   <nav>
  3.     <div class="close"></div>
  4.     <a href="#">Home</a>
  5.     <a href="#">About Us</a>
  6.     <a href="#">Our Work</a>
  7.     <a href="#">Contact</a>
  8.   </nav>
  9. </div>

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

  1. <div id="paper-window">
  2.   <div id="paper-front">
  3.     <div class="hamburger"><span></span></div>
  4.     <div id="container">
  5.       <section>...</section>
  6.       <section>...</section>
  7.       ...
  8.     </div>
  9.   </div>
  10. </div>

CSS 样式

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

  1. #paper-back {
  2.   width: 100%;
  3.   height: 100vh;
  4.   background-color: #243040;
  5.   position: fixed;
  6.   top: 0;
  7.   left: 0;
  8.   font-size: 33px;
  9. }
  10. #paper-back nav {
  11.   padding: 120px 34px;
  12. }
  13. #paper-back nav a {
  14.   display: block;
  15.   margin-bottom: 25px;
  16.   text-decoration: none;
  17.   color: rgba(255, 255, 255, 0.7);
  18. }

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

  1. #paper-window {
  2.   height: 100vh;
  3.   width: 100vw;
  4.   position: relative;
  5.   overflow-x: hidden;
  6.   overflow-y: scroll;
  7.   z-index: 2;
  8. }

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

  1. #paper-front {
  2.   pointer-events: auto;
  3.   position: relative;
  4.   z-index: 3;
  5.   background-color: white;
  6.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  7.   -webkit-transform-origin: center 70%;
  8.       -ms-transform-origin: center 70%;
  9.           transform-origin: center 70%;
  10.   -webkit-transition: all 0.3s ease;
  11.           transition: all 0.3s ease;
  12. }

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

  1. #paper-window.tilt {
  2.   overflow: hidden;
  3.   pointer-events: none;
  4. }
  5. #paper-window.tilt #paper-front {
  6.   -webkit-transform: rotate(10deg) translateZ(0);
  7.           transform: rotate(10deg) translateZ(0);
  8. }

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

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

已有 344 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!