css+js实现侧边栏滑动导航菜单效果代码-html代码-BFW代码库

css+js实现侧边栏滑动导航菜单效果代码

代码语言：html

代码描述：css+js实现侧边栏滑动导航菜单效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
    <style>
        .lead {
            font-size: 1.5rem;
            font-weight: 300
        }

        .container {
            margin: 150px auto;
            max-width: 960px;
            text-align: center
        }
@import 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap';:root {
            --clr-primary-1: hsl(205,86%,17%);
            --clr-primary-2: hsl(205,77%,27%);
            --clr-primary-3: hsl(205,72%,37%);
            --clr-primary-4: hsl(205,63%,48%);
            --clr-primary-5: hsl(205,78%,60%);
            --clr-primary-6: hsl(205,89%,70%);
            --clr-primary-7: hsl(205,90%,76%);
            --clr-primary-8: hsl(205,86%,81%);
            --clr-primary-9: hsl(205,90%,88%);
            --clr-primary-10: hsl(205,100%,96%);
            --clr-grey-1: hsl(209,61%,16%);
            --clr-grey-2: hsl(211,39%,23%);
            --clr-grey-3: hsl(209,34%,30%);
            --clr-grey-4: hsl(209,28%,39%);
            --clr-grey-5: hsl(210,22%,49%);
            --clr-grey-6: hsl(209,23%,60%);
            --clr-grey-7: hsl(211,27%,70%);
            --clr-grey-8: hsl(210,31%,80%);
            --clr-grey-9: hsl(212,33%,89%);
            --clr-grey-10: hsl(210,36%,96%);
            --clr-white: #fff;
            --clr-red-dark: hsl(360,67%,44%);
            --clr-red-light: hsl(360,71%,66%);
            --clr-green-dark: hsl(125,67%,44%);
            --clr-green-light: hsl(125,71%,66%);
            --clr-black: #222;
            --ff-primary: 'Roboto',sans-serif;
            --ff-secondary: 'Open Sans',sans-serif;
            --transition: all .3s linear;
            --spacing: .1rem;
            --radius: .25rem;
            --light-shadow: 0 5px 15px rgba(0,0,0,0.1);
            --dark-shadow: 0 5px 15px rgba(0,0,0,0.2);
            --max-width: 1170px;
            --fixed-width: 620px
        }

        *,::after,::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            font-family: var(--ff-secondary);
            background: var(--clr-grey-10);
            color: var(--clr-grey-1);
            line-height: 1.5;
            font-size: .875rem
        }

        ul {
            list-style-type: none
        }

        a {
            text-decoration: none
        }

        h1,h2,h3,h4 {
            letter-spacing: var(--spacing);
            text-transform: capitalize;
            line-height: 1.25;
            margin-bottom: .75rem;
            font-family: var(--ff-primary)
        }

        h1 {
  .........完整代码请登录后点击上方下载按钮下载查看