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

网友评论0