react framer-motion实现多级菜单下拉折叠效果代码-html代码-BFW代码库

react framer-motion实现多级菜单下拉折叠效果代码

代码语言：html

代码描述：react framer-motion实现多级菜单下拉折叠效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
:root {
        --border-radius-500: 8px;
        --color-on-background: #ffffff;
        --fonts-primary: system-ui,sans-serif;
    }

        * {
            box-sizing: border-box;
            user-select: none;
        }

        body {
            background-color: #fafafa;
            font-family: var(--fonts-primary);
            font-size: 14px;
            margin: 0;
            min-height: 100vh;
            display: flex;
            padding-top: 120px;
            justify-content: center;
        }

        .side-nav {
            display: block;
            width: 280px;
            height: 500px;
            border: 1px solid rgba(0,0,0,.08);
            padding: 16px 0;
        }

        .sn-container + .sn-container {
            margin-left: 16px;
        }

        .side-nav li {
            display: block;
            list-style: none;
            width: 100%;
            box-sizing: border-box;
            padding: 0 8px;
            color: rgba(0,0,0,.7);
        }

        .nav-item {
            width: 100%;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 12px;
            cursor: pointer;
            font-weight: 600;
            justify-content: space-between;
        }

        .icon {
            margin-right: 12px;
            transition: transform .2s;
        }
        .nav-sub-item {
            width: 100%;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 32px;
            cursor: pointer;
        }
        .nav-item:hover,
        .nav-sub-item:hover {
            background: rgba(0,0,0,.02);
        }

        .nav-item:active,
        .nav-sub-item:active {
            background: rgba(0,0,0,.05);
        }

        .sub {
            overflow: hidden;
        }

        .container {
            display: flex;
        }
    </style>



</head>

<body>
    <div id="root"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framer-motion.js"></script>
    <script>
        function _extends() {
            _extends = Object.assign || function (target) {
                for (var i = 1; i < arguments.length; i++) {
                    if (window.CP.shouldStopExecution(0)) break; var source = arguments[i]; for (var key in source) {
                        if (Object.prototype.hasOwnProperty.call(source, key)) {
                            target[key] = source[key];
                        }}}window.CP.exitedLoop(0); return target;
            }; return _extends.apply(this, arguments);
        }const {
            createContext,
            useContext,
            useLayoutEffect,
            useEffect,
            useRef,
            useState
        } = React;
        const {
            motion,
            useMotionValue
        } = Motion;


        const ChevIcon = (props) => /*#__PURE__*/
        React.createElement("svg", _extends({
            fill: "none", className: "icon", viewBox: "0 0 24 24"
        }, props), /*#__PURE__*/
            React.createElement("path", {
                fillRule: "evenodd",
                clipRule: "evenodd",
                d: "M4.08 7.598a1.5 1.5 0 012.122 0l5.657 5.657 5.657-5.657a1.5 1.5 0 112.12 2.121l-6.717 6.718a1.5 1.5 0 01-2.12 0L4.08 9.719a1.5 1.5 0 010-2.12z",
                fill: props.color
            }));




        const navItems = [{
            title: '一级标题',
            key: '1',
            subItems: [{
                title: '二级标题',
                key: '1.1'
            },

                {
                    title: '二级标题 2',
                    key: '1.2'
                },

                {
                    title: '二级标题 3',
                    key: '1.3'
                }]
        },



            {
                title: '一级标题 2',
                key: '2',
                subItems: [{
                    title: '二级标题',
                    key: '2.1'
                },

                    {
                        title: '二级标题 2',
                        key: '2.2'
                    },

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