3种CSS3移动手机隐藏菜单UI界面设计源码.docx

3种CSS3移动手机隐藏菜单UI界面设计源码这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,MaterialDesign风格效果和展开式效果。使用方法HTML结构这三种不同的隐藏菜单的HTML结构大致基本相同。第一种滑动效果菜单的HTML结构如下:<divclass="screen">  <divclass="navbar"></div>  <divclass="list">      <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>  </div>                                   <divclass="burger">      <divclass="x"></div>      <divclass="y"></div>      <divclass="z"></div>  </div>      </div>  </div>         CSS样式第一种隐藏菜单的滑动效果的CSS实现代码非常简单。整个菜单设置了固定的宽度和高度,并设置指定贝兹曲线的动画过渡效果。{  height:568px;   width:320px;  margin-left:-190px;  opacity:0;    position:relative;  -webkit-transition:all500mscubic-bezier(,,,);    -moz-transition:all500mscubic-bezier(,,,);    -ms-transition:all500mscubic-bezier(,,,);    -o-transition:all500mscubic-bezier(,