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.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      width: "238",
      height: "526",
      viewBox: "0 0 238 526",
      style: backgroundStyle },

    React.createElement("path", { d: "M238 526H0V0h238v526", fill: "#ebf3fa" }),
    React.createElement("path", {
      d: "M-2.14 284.527V266.48L9.052 263.4c1.452-.4 2.325-1.973 1.95-3.497l-.087-.347c-.32-1.284-1.433-2.14-2.638-2.14-.23 0-.458.03-.69.092l-9.727 2.675v-71.223l81.366-22.375c.51-.14 1.026-.206 1.527-.206 2.7 0 5.178 1.912 5.89 4.777l19.154 77.083c.85 3.4-1.108 6.912-4.337 7.802l-103.6 28.485m55.566-39.524c-.227 0-.458.03-.685.093l-34.26 9.42c-1.45.4-2.328 1.973-1.948 3.498l.086.346c.317 1.284 1.43 2.14 2.64 2.14.226 0 .457-.03.684-.092l34.263-9.42c1.448-.4 2.325-1.973 1.945-3.498l-.082-.346c-.32-1.285-1.433-2.14-2.642-2.14m-41.54-25.93c-.274 0-.56.04-.858.123-1.154.317-1.87 1.08-2.156 2.29-.22.95-.17 2.08.156 3.394.33 1.315.814 2.33 1.456 3.05.603.676 1.3 1.014 2.083 1.014.274 0 .556-.04.853-.122 1.143-.314 1.86-1.076 2.145-2.287.223-.96.172-2.095-.152-3.41-.33-1.313-.807-2.326-1.44-3.04-.604-.674-1.297-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.393.325 1.315.81 2.33 1.456 3.05.603.676 1.296 1.013 2.083 1.013.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.228-.958.18-2.094-.148-3.41-.325-1.313-.807-2.326-1.44-3.04-.6-.673-1.296-1.01-2.087-1.01m10.663-2.932c-.274 0-.564.04-.86.123-1.152.318-1.868 1.082-2.154 2.292-.224.948-.17 2.08.155 3.393.33 1.314.81 2.33 1.456 3.05.604.676 1.297 1.013 2.084 1.013.274 0 .556-.04.85-.122 1.146-.314 1.86-1.076 2.145-2.287.226-.96.175-2.096-.15-3.41-.33-1.314-.81-2.328-1.44-3.04-.604-.675-1.3-1.012-2.087-1.012m7.034-1.934c-.274 0-.56.04-.86.123-1.152.317-1.872 1.08-2.154 2.29-.223.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.453 3.05.603.676 1.3 1.014 2.082 1.014.274 0 .56-.04.854-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.96.177-2.096-.148-3.41-.325-1.313-.806-2.327-1.44-3.04-.603-.674-1.296-1.01-2.087-1.01m7.034-1.935c-.273 0-.558.04-.856.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.157 3.393.33 1.314.814 2.33 1.456 3.05.607.676 1.3 1.013 2.086 1.013.27 0 .552-.04.85-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.958.177-2.095-.148-3.41-.328-1.313-.806-2.326-1.44-3.04-.603-.673-1.296-1.01-2.087-1.01m7.04-1.935c-.278 0-.564.04-.862.123-1.15.317-1.87 1.08-2.153 2.29-.227.95-.172 2.08.157 3.394.325 1.314.81 2.33 1.456 3.05.603.675 1.296 1.013 2.083 1.013.27 0 .557-.04.85-.122 1.143-.314 1.86-1.077 2.14-2.287.232-.96.18-2.095-.147-3.41-.325-1.313-.807-2.326-1.437-3.04-.603-.674-1.3-1.01-2.086-1.01m10.66-2.932c-.275 0-.56.04-.863.122-1.15.318-1.87 1.08-2.152 2.29-.224.95-.17 2.08.156 3.394.33 1.314.815 2.33 1.457 3.05.603.676 1.3 1.014 2.087 1.014.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.227-.96.18-2.095-.148-3.41-.325-1.313-.807-2.327-1.44-3.04-.6-.674-1.3-1.01-2.087-1.01m7.033-1.935c-.274 0-.56.04-.857.122-1.155.317-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.394.324 1.314.81 2.33 1.452 3.05.602.675 1.3 1.013 2.082 1.013.274 0 .56-.042.853-.123 1.143-.314 1.86-1.077 2.145-2.287.224-.958.173-2.095-.152-3.41-.325-1.313-.807-2.326-1.44-3.04-.604-.673-1.296-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.457 3.05.603.675 1.295 1.012 2.082 1.012.27 0 .552-.04.85-.12 1.147-.316 1.855-1.078 2.14-2.288.228-.96.18-2.095-.148-3.41-.325-1.313-.806-2.326-1.437-3.04-.602-.674-1.3-1.01-2.09-1.01m7.038-1.935c-.278 0-.563.042-.86.125-1.152.317-1.872 1.08-2.158 2.29-.22.948-.164 2.078.16 3.392.33 1.315.81 2.33 1.457 3.05.6.676 1.296 1.013 2.082 1.013.274 .........完整代码请登录后点击上方下载按钮下载查看