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

代码语言：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;
    }
    /* Default navigation icon */
    .nav__trigger {
      display: block;
      position: absolute;
      width: 30px;
      height: 25px;
      right: 10px;
      top: 10px;
      z-index: 200;
    }
    .nav--active .nav__trigger {
      opacity: 0.5;
    }
    .nav__icon {
      display: inline-block;
      position: relative;
      width: 30px;
      height: 5px;
      background-color: #FFFFFF;
      -webkit-transition-property: background-color, -webkit-transform;
      transition-property: background-color, -webkit-transform;
      transition-property: background-color, transform;
      transition-property: background-color, transform, -webkit-transform;
      -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
    }
    .nav__icon:before,
    .nav__icon:after {
      content: '';
      display: block;
      width: 30px;
      height: 5px;
      position: absolute;
      background: #FFFFFF;
      -webkit-transition-property: margin, -webkit-transform;
      transition-property: margin, -webkit-transform;
      transition-property: margin, transform;
      transition-property: margin, transform, -webkit-transform;
      -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
    }
    .nav__icon:before {
      margin-top: -10px;
    }
    .nav__icon:after {
      margin-top: 10px;
    }
    /* Don't nest if you don't have to. */
    /**
    * Style #1
    */
    .style-1 .nav {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
      width: 100%;
      height: 100%;
    }
    .style-1 .nav__link {
      opacity: 0;
      -webkit-transition-delay: 500ms;
              transition-delay: 500ms;
    }
    .style-1 .nav--active .nav__link {
      opacity: 1;
    }
    .style-1 .nav--active .nav {
      -webkit-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    .style-1 .nav--active .nav__icon {
      background: rgba(0, 0, 0, 0);
    }
    .style-1 .nav--active .nav__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    .style-1 .nav--active .nav__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }
    /**
    * Style #2
    */
    .style-2 {
      -webkit-perspective: 1000px;
              perspective: 1000px;
    }
    .style-2 .nav {
      width: 100%;
      height: 100%;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    .style-2 .nav--active .nav {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
    .style-2 .iphone__content {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
    }
    .style-2 .nav--active .iphone__content {
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    .style-2 .navi__icon {
      background: rgba(0, 0, 0, 0);
    }
    .style-2 .navi__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .style-2 .navi__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .style-2 .nav--active .nav__icon {
      background: rgba(0, 0, 0, 0);
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
    }
    .style-2 .nav--active .nav__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .style-2 .nav--active .nav__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    /**
    * Style #3
    */
    .style-3 .nav {
      width: 100%;
      height: 100%;
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .style-3 .nav--active .nav {
      -webkit-transform: translateX(20%);
              transform: translateX(20%);
    }
    .style-3 .iphone__content {
      -webkit-transform: scale(1) translateX(0);
              transform: scale(1) translateX(0);
      -webkit-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
    }
    .style-3 .iphone__screen {
      background-color: #333;
    }
    .style-3 .nav--active .iphone__content {
      -webkit-transform: scale(0.9) translateX(-90%);
              transform: scale(0.9) translateX(-90%);
    }
    .style-3 .nav__icon {
      background: rgba(0, 0, 0, 0);
    }
    .style-3 .nav__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .style-3 .nav__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .style-3 .nav--active .nav__icon {
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
    }
    /**
    * Style #4
    */
    .style-4 .nav {
      width: 100%;
      height: 100%;
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    .style-4 .nav--active .nav {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    .style-4 .nav--active .nav__icon {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .style-4 .nav__link {
      opacity: 0;
      -webkit-transition-delay: 500ms;
              transition-delay: 500ms;
    }
    .style-4 .nav--active .nav__link {
      opacity: 1;
    }
    /**
    * Style #5
    */
    .style-5 .nav {
      -webkit-transform: translate(100%, -100%) scale(0.5);
              transform: translate(100%, -100%) scale(0.5);
      border-radius: 100%;
    }
    .style-5 .nav--active .nav {
      -webkit-transform: translateY(0) scale(1);
              transform: translateY(0) scale(1);
      border-radius: 0;
      width: 100%;
      height: 100%;
    }
    .style-5 .nav__link {
      opacity: 0;
      -webkit-transition-delay: 500ms;
              transition-delay: 500ms;
    }
    .style-5 .nav--active .nav__link {
      opacity: 1;
    }
    .style-5 .nav--active .nav__icon {
      background: rgba(0, 0, 0, 0);
    }
    .style-5 .nav--active .nav__icon:before {
      margin-top: 0;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    .style-5 .nav--active .nav__icon:after {
      margin-top: 0;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }
    /**
    * Style #6
    */
    .style-6 .nav {
      -webkit-transform: rotateZ(-90deg);
              transform: rotateZ(-90deg);
      width: 100%;
      height: 100%;
    }
    .style-6 .nav--active .nav {
      -webkit-transform: rotateZ(0);
              transform: rotateZ(0);
    }
    .style-6 .nav__link {
      opacity: 0;
      -webkit-transition-delay: 500ms;
              transit.........完整代码请登录后点击上方下载按钮下载查看