react实现弹出菜单效果-html代码-BFW代码库

代码语言：html

代码描述：react实现弹出菜单效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Liquid overlay</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200&family=Philosopher:ital,wght@0,700;1,700&display=swap');

.MenuItem:active {
  background: #443d7f;
}
</style>

</head>
<body translate="no">
<div id="root"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script id="rendered-js">
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 { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

function App() {
  const [expanded, setExpanded] = useState(false);
  const [{ x, y }, set] = useSpring(() => ({
    x: 188,
    y: 320 }));

  const bind = useDrag(
  ({ movement: [x, y], velocity, down, direction: [dx], tap }) => {
    if (tap) {
      setExpanded(!expanded);
      set({ x: expanded ? 188 : 0, y: 320 });
      return;
    }
    if (!down) {
      setExpanded(x > 96 ? false : true);
      set({ x: x > 96 ? 188 : 0, y: 320 });
    } else {
      set({ x, y });
    }
  },
  {
    initial: () => [x.get(), y.get()],
    bounds: { left: 0, right: 188, top: 0, bottom: 476 },
    rubberband: false });



  const appStyle = {
    alignItems: "center",
    backgroundColor: "#fff",
    display: "flex",
    height: "100vh",
    justifyContent: "center",
    margin: 0 };


  const phoneStyle = {
    height: 554,
    position: "relative",
    width: 265 };


  const frameStyle = {
    backgroundColor: "#000",
    borderRadius: 37,
    height: 554,
    position: "absolute",
    width: 265 };


  const screenStyle = {
    backgroundColor: "#fff",
    borderRadius: 26,
    height: 526,
    left: 13,
    overflow: "hidden",
    position: "absolute",
    top: 12,
    width: 238 };


  const backgroundStyle = {
    position: "absolute",
    userSelect: "none",
    WebkitUserSelect: "none" };


  const logoStyle = {
    fontFamily: "'Philosopher', sans-serif",
    fontSize: 30,
    position: "absolute",
    textAlign: "center",
    top: 80,
    width: "100%" };


  const overlayStyle = {
    position: "absolute" };


  const notchStyle = {
    background: "#000",
    borderRadius: 12,
    height: 30,
    left: 67,
    position: "absolute",
    top: 1,
    width: 130 };


  const menuStyle = {
    position: "absolute",
    width: "100%",
    x: x.to(x => x * 1.6) // 1.2553
  };

  const menuListStyle = {
    listStyle: "none",
    padding: "50px 36px 0",
    color: "#fff" };


  const menuItemStyle = {
    alignItems: "center",
    borderBottom: "1px solid #fff",
    display: "flex",
    fontFamily: "'Catamaran'",
    fontSize: 24,
    height: 50,
    userSelect: "none",
    WebkitUserSelect: "none" };


  //     background: #443d7f;

  const handleStyle = {
    alignItems: "center",
    borderRadius: 25,
    cursor: "pointer",
    display: "flex",
    justifyContent: "center",
    height: 50,
    position: "absolute",
    top: 0,
    width: 50,
    x,
    y };


  const backStyle = {
    fill: "none",
    stroke: "#fff",
    strokeWidth: 4,
    strokeLinecap: "round" };


  return (
    React.createElement("div", { style: appStyle },
    React.createElement("div", { style: phoneStyle },
    React.createElement("div", { style: frameStyle }),
    React.createElement("div", { style: screenStyle },

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