浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery菜单导航 2016-09-22

人气7936

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果使用jQueryCSS3制作的倾斜页面打开侧边栏菜单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实现代码非常简单,请参考下载文件。

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:86.18KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2179.html 非特殊说明,本文版权归原作者所有,转载请注明出处
倾斜页面打开侧边栏菜单UI界面设计

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)