伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:导航-垂直导航
 3883  27  查看评论 (1)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10

HTML结构

整个侧边栏使用一个div.paper-back作为包裹元素,里面是一个<nav>元素包裹一组菜单项<a>元素。其中div.close是关闭按钮。<div id="paper-back">   <nav>     <div class="close"></div>     <a href="http://yzshield.com/quot;#">Home</a>"     <a href="http://yzshield.com/quot;#">About Us</a>"     <a href="http://yzshield.com/quot;#">Our Work</a>"     <a href="http://yzshield.com/quot;#">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); }
相关伟德BETVICTOR-垂直导航

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 17720  58

超酷的SVG左侧导航栏手机1946韦德最新网站

超酷的SVG左侧导航栏手机1946韦德最新网站(Cool SVG left navigation bar effects)
  垂直导航
 9523  101

css3结合jQuery侧边导航酷炫展开效果

鼠标移入侧边栏,二级菜单3D展开 鼠标hover背景变色,鼠标移入二维码图片背景变色
  垂直导航
 18269  141

基于jQuery的垂直菜单手机1946韦德最新网站

网站上常用的到的垂直菜单,基于jQuery的垂直菜单手机1946韦德最新网站
  垂直导航
 16288  72

讨论这个项目(1)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    117777777 0
    2018/1/7 14:36:29
    小白请教一下,怎样在paper-window里面加背景图片呢 回复
取消回复