这是一款效果使用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;