html左侧导航菜单ui，倾斜页⾯打开侧边栏菜单UI界⾯设计这是⼀款效果使⽤jQuery和CSS3制作的倾斜页⾯打开侧边栏菜单UI界⾯设计效果。这个效果中，⽤户点击页⾯上的汉堡包按钮时，整个页⾯会向右倾斜⼀些⾓度，隐藏在左边的侧边栏被显⽰出来，整体效果⾮常炫酷。
制作⽅法
HTML结构
整个侧边栏使⽤⼀个div.paper-back作为包裹元素，⾥⾯是⼀个元素包裹⼀组菜单项元素。其中div.close是关闭按钮。
页⾯的内容部分使⽤嵌套
的HTML结构。div.hamburger是汉堡包图标。每⼀个页⾯内容块使⽤⼀个元素来制作。
...
...
...
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实现代码⾮常简单，请参考下载⽂件。

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