jquery实现移动端菜单导航弹出的六种效果代码-html代码-BFW代码库

jquery实现移动端菜单导航弹出的六种效果代码

代码语言：html

代码描述：jquery实现移动端菜单导航弹出的六种效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh" class="no-js">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script>

    <style>
        body {
      background: #1BBC9B;
      font-family: 'Montserrat', sans-serif;
    }
    .container {
      text-align: center;
    }
    h1 {
      color: #117964;
      font-weight: 400;
      font-size: 2em;
      margin: 1em 0;
    }
 
    .iphone {
      width: 16.06em;
      height: 30.6em;
      border-radius: 1.875em;
      margin: 2em;
      position: relative;
      display: inline-block;
      background: #fff;
    }
    .iphone__item {
      width: 16.06em;
      height: 1em;
      position: absolute;
      bottom: -2em;
      color: #158f76;
      text-align: center;
    }
    .iphone__power-btn {
      width: 2.188em;
      height: .188em;
      background: #e0e0e0;
      position: absolute;
      right: 2.5em;
      top: -0.188em;
    }
    .iphone__left-btn {
      width: .188em;
      height: 1.250em;
      top: 3.250em;
      left: -0.188em;
      position: absolute;
      background: #e0e0e0;
    }
    .iphone__left-btn:before {
      content: '';
      width: .188em;
      height: .875em;
      position: absolute;
      top: 3em;
      background: #e0e0e0;
    }
    .iphone__left-btn:after {
      content: '';
      width: .188em;
      height: .875em;
      position: absolute;
      top: 5.5em;
      background: #e0e0e0;
    }
    .iphone__details {
      width: .438em;
      height: .438em;
      border-radius: 100%;
      position: relative;
      top: 1.313em;
      left: 8em;
      background: #7c7c7c;
    }
    .iphone__details:before {
      content: '';
      width: 2.5em;
      height: .25em;
      border-radius: .25em;
      position: absolute;
      top: 1em;
      left: -1em;
      background: #7c7c7c;
    }
    .iphone__home-btn {
      width: 2.25em;
      height: 2.25em;
      border-radius: 100%;
      position: absolute;
      bottom: 1em;
      right: 6.75em;
      background: #f7f7f7;
    }
    .iphone__home-btn:before {
      content: '';
      width: .813em;
      height: .813em;
      border: .15em solid #a8a8a8;
      border-radius: .2em;
      position: absolute;
      top: .6em;
      left: .57em;
    }
    .iphone__screen {
      width: 14.5em;
      height: 22.938em;
      position: absolute;
      top: 3.75em;
      left: .750em;
      overflow: hidden;
    }
    .iphone__content {
      position: relative;
      background-color: #D2527F;
      width: 100%;
      height: 100%;
    }
    /**
    * Navigation Defaults
    */
    .nav {
      position: absolute;
      z-index: 100;
      opacity: 0;
      -webkit-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
    }
    .nav--active .nav {
      opacity: 1;
      background-color: #333;
    }
    .nav__list {
      margin: 0;
      padding: 10px;
    }
    .nav__item {
      list-style-type: none;
      text-align: left;
    }
    .nav__link {
      font-size: 1.3em;
      text-transform: uppercase;
      text-decoration: none;
      color: #FFFFFF;
      opacity: 1;
      -webkit-transition: opacity 300ms ease-in-out;
      transition: opacity 300ms ease-in-out;
   .........完整代码请登录后点击上方下载按钮下载查看