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;
.........完整代码请登录后点击上方下载按钮下载查看