reactjs React + Tailwindcss导航条移动的不工作

ffdz8vbo 于 2023-01-08 发布在 React

关注(0)|答案(1)|浏览(149)

我是react开发的新手，我在tailwindcss上做了一些实验，我试图为移动的构建一个导航栏的小例子，但是从右边的过渡并不平滑。
我已经看过论坛，和其他答案在这里，但他们没有一个在我的情况下工作。
这是导航栏组件：

import {useState} from "react";
import {GiHamburgerMenu} from "react-icons/gi";

export const SideMenuBar = () => {
    const [sidebar, setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <div className={'side_bar_menu'}>
            <GiHamburgerMenu onClick={showSideBar}/>
                {
                    sidebar ? <div className={'side_menu_data_items'}/> : null
                }
        </div>
    )
}

顺风时的css配置：

theme: {
    extend: {
      fontSize: {
        'mobile-title': '2.60rem'
      },
      colors: {
        'dark-blue': '#0A0F2E',
        'dark-blue-2': '#181c64',
        'grey-blue': '#3c0e66',
        'light-blue-purple': '#344ff0',
        'dark-shade-blue-500': '#221C5D'
      },
      spacing: {
        '720': '45rem',
        '336': '21rem'
      },
      zIndex: {
        '1': '1'
      },
      transitionProperty: {
        'width': 'width'
      }
    },
  },

最后，我在导航栏组件上使用的css类。

.side_menu_data_items {
    @apply bg-dark-blue-2 left-0 top-0 w-screen absolute -z-1 h-screen transition-width ease-in-out duration-500
  }

任何关于我做错了什么的想法或暗示都非常感谢。

reactjs

来源：https://stackoverflow.com/questions/75042000/react-tailwindcss-navbar-mobile-not-working

1条答案

按热度按时间

wn9m85ua1#

参考以下示例：

使用汉堡菜单切换移动导航栏

代码：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="bg-yellow-400 h-screen relative z-0 flex">
      <div class="hidden md:block bg-blue-400 w-1/3">
        <div class="flex h-full items-center justify-center text-4xl">
          Desktop Navbar
        </div>
      </div>
      <div class="text-4xl pl-24 md:p-0 main_content">
        The main content of the file and it has it's content all over the page
        and i want to build a navbar on top of this
      </div>
      <div
        class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden"
      >
        <div class="flex h-full items-center justify-center text-4xl">
          Mobile Navbar
        </div>
      </div>
      <div
        class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
      >
        <span class="block w-8 h-1 bg-white"></span>
        <span class="block w-8 h-1 bg-white"></span>
        <span class="block w-8 h-1 bg-white"></span>
      </div>
    </div>
    <script type="text/javascript">
      document
        .querySelector(".hamburger_menu")
        .addEventListener("click", () => {
          console.log("Hello");
          document.querySelector(".mobile_navbar").classList.toggle("hidden");
        });

      document.querySelector(".main_content").addEventListener("click", () => {
        console.log("Touch me");
        console.log(
          document
            .querySelector(".mobile_navbar")
            .classList.contains("hidden") == false &&
            document.querySelector(".mobile_navbar").classList.toggle("hidden")
        );
      });
    </script>
  </body>
</html>

在`hamburger menu`的小型设备中输出

点击`hamburger menu`时

另请参考：Tailwind how to overlap div in small device

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs React + Tailwindcss导航条移动的不工作

1条答案

使用汉堡菜单切换移动导航栏

代码：

在`hamburger menu`的小型设备中输出

点击`hamburger menu`时

另请参考：Tailwind how to overlap div in small device

相关问题

热门标签

最新问答

reactjs React + Tailwindcss导航条移动的不工作

1条答案

使用汉堡菜单切换移动导航栏

代码：

在hamburger menu的小型设备中输出

点击hamburger menu时

另请参考：Tailwind how to overlap div in small device

相关问题

热门标签

最新问答

在`hamburger menu`的小型设备中输出

点击`hamburger menu`时