hamburger-menu 相关问题

如何使用 Tailwind CSS 构建动画汉堡菜单？如何使用 Tailwind CSS 构建动画汉堡菜单？ <label class="relative w-10 h-8 cursor-pointer block"> <input type="checkbox" id="burger" class="peer/burger hidden" /> <span class=" absolute peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span> <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span> <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span> </label> 这是正确的代码 <label class="relative w-10 h-8 cursor-pointer block"> <input type="checkbox" id="burger" class="peer/burger hidden" /> <span class=" absolute peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span> <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span> <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span> ` <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <label class="relative w-10 h-8 cursor-pointer block"> <input type="checkbox" id="burger" class="peer/burger hidden" /> <span class=" absolute peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span> <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span> <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span> </label>

css reactjs tailwind-css hamburger-menu

回答 1 投票 0

汉堡菜单问题 - 导航菜单没有消失

我在保留汉堡菜单和导航菜单消失时遇到问题。有人能帮忙吗？参见html 我在保留汉堡菜单和导航菜单消失时遇到问题。有人可以帮忙吗？参见html <nav> <a href="#" class="toggle-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>  <a href="index.html">Home</a> <a href="whatson.html">Whats on</a> <a href="businesses.html">Businesses</a> <a href="gallery.html">Gallery</a> <a href="contactus.html">Contact us</a> </nav> 和CSS nav { grid-area: nav; align-items: center; background-color: rgb(0,0,0); padding: 10px; border: 3px solid rgb(0,0,0); display:inline-block; background-size: 100% auto; background-repeat: no-repeat; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%; } nav a { display: inline-block; background-color: rgb(252, 252, 252); color: rgb(0); padding: 10px 15px; border: 2px solid black; border-radius: 5px; font-size: 18px; font-weight: bold; transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */ text-decoration: none; margin: 0 10px; } nav a:hover { background-color: rgb(140, 71, 147); /* Change background on hover */ color: rgb(255, 255, 255); /* Change text color on hover */ transform: scale(1.05); /* Slightly increase size on hover */ } /*MOBILE*/ .toggle-button { position: absolute; top:18.2rem; right:1rem; display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; } .toggle-button .bar { height: 3px; width: 100%; background-color: purple; border-radius: 10px; } @media (max-width: 700px) { .toggle-button { display:flex; } .nav { display: none; } .nav a { display: none; } } 我已经尝试了几个小时，但我无法理解发生了什么。预先感谢我已经尝试了我能想到的一切！任何帮助将不胜感激。尝试这样的事情：从 toggle-button 中取出 nav，这样当您将其切换为隐藏时，它就不会变得不可见。为 nav 提供 id: nav 和 class: hide，这意味着由于您的媒体查询，nav 不会显示在手机等较小设备上。然后使用 JS 在用户单击按钮时打开和关闭隐藏类。 document.querySelector(".toggle-button").addEventListener("click", () => { document.querySelector("#nav").classList.toggle("hide") }) nav { grid-area: nav; align-items: center; background-color: rgb(0, 0, 0); padding: 10px; border: 3px solid rgb(0, 0, 0); display: inline-block; background-size: 100% auto; background-repeat: no-repeat; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%; } nav a { display: inline-block; background-color: rgb(252, 252, 252); color: rgb(0); padding: 10px 15px; border: 2px solid black; border-radius: 5px; font-size: 18px; font-weight: bold; transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */ text-decoration: none; margin: 0 10px; } nav a:hover { background-color: rgb(140, 71, 147); /* Change background on hover */ color: rgb(255, 255, 255); /* Change text color on hover */ transform: scale(1.05); /* Slightly increase size on hover */ } /*MOBILE*/ .toggle-button { position: absolute; top: 18.2rem; right: 1rem; display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; } .toggle-button .bar { height: 3px; width: 100%; background-color: purple; border-radius: 10px; } @media (max-width: 700px) { .toggle-button { display: flex; } .hide { display: none } } <a href="#" class="toggle-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <nav id="nav" class="hide">  <a href="index.html">Home</a> <a href="whatson.html">Whats on</a> <a href="businesses.html">Businesses</a> <a href="gallery.html">Gallery</a> <a href="contactus.html">Contact us</a> </nav> 您在 CSS 中使用了类 .nav，而 HTML 中没有这样的类，标签 nav 没有类。您还需要删除媒体查询中的第一个显示：没有，因为您已经隐藏了 a 标签那么，你的 CSS 将会是： nav { grid-area: nav; align-items: center; background-color: rgb(0,0,0); padding: 10px; border: 3px solid rgb(0,0,0); display:inline-block; background-size: 100% auto; background-repeat: no-repeat; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%; } nav a { display: inline-block; background-color: rgb(252, 252, 252); color: rgb(0); padding: 10px 15px; border: 2px solid black; border-radius: 5px; font-size: 18px; font-weight: bold; transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */ text-decoration: none; margin: 0 10px; } nav a:hover { background-color: rgb(140, 71, 147); /* Change background on hover */ color: rgb(255, 255, 255); /* Change text color on hover */ transform: scale(1.05); /* Slightly increase size on hover */ } /*MOBILE*/ .toggle-button { position: absolute; top:18.2rem; right:1rem; display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; } .toggle-button .bar { height: 3px; width: 100%; background-color: purple; border-radius: 10px; } @media (max-width: 1000px) { .toggle-button { display:flex; } nav a { display: none; } }

html css hamburger-menu

回答 2 投票 0

导航栏中的汉堡菜单无法使用 html 和 css 工作

*{ 填充：0；保证金：0； } A{ 文本装饰：无；颜色：黑色; } ul{ 列表样式：无； } /* 最上面的栏 */ #上栏{ 最小高度：10vh；最大宽度：100vw；背景...

html css responsive-design responsive hamburger-menu

回答 2 投票 0

汉堡菜单适用于 Firefox，但不适用于基于 chromium 的浏览器

在我的 React 应用程序中，我有一个汉堡菜单，可以在 Firefox 上按预期运行，但它在 Chrome 上不起作用，并且我没有收到控制台错误。这是负责处理汉堡的脚本

javascript css reactjs dom hamburger-menu

回答 1 投票 0

汉堡菜单滑入动画走出屏幕

我正在尝试使用 HTML、CSS 和 JS 制作汉堡菜单滑入/滑出动画，但侧边栏的起点超出屏幕（并且超出 html 正文），从而留下水平滚动。我...