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 {
            font-size: 3rem
        }

        h2 {
            font-size: 2rem
        }

        h3 {
            font-size: 1.25rem
        }

        h4 {
            font-size: .875rem
        }

        p {
            margin-bottom: 1.25rem;
            color: var(--clr-grey-5)
        }

@media screen and (min-width:800px) {
            h1 {
                font-size: 4rem
            }

            h2 {
                font-size: 2.5rem
            }

            h3 {
                font-size: 1.75rem
            }

            h4 {
                font-size: 1rem
            }

            body {
                font-size: 1rem
            }

            h1,h2,h3,h4 {
                line-height: 1
            }}

        .section {
            padding: 5rem 0
        }

        .section-center {
            width: 90vw;
            margin: 0 auto;
            max-width: 1170px
        }

@media screen and (min-width:992px) {
            .section-center {
                width: 95vw
            }}

        main {
            min-height: 100vh;
            display: grid;
            place-items: center
        }

        .sidebar-toggle {
            position: fixed;
            top: 2rem;
            right: 3rem;
            font-size: 2rem;
            background: 0;
            border-color: transparent;
            color: var(--clr-primary-5);
            transition: var(--transition);
            cursor: pointer;
            animation:.........完整代码请登录后点击上方下载按钮下载查看