Der umgeschriebene Titel lautet: Wie kann ich mit Tailwind CSS ein animiertes Dropdown-Menü mit einstellbarer Höhe erstellen?
Ich verwende: Tailwindcss, React und Next.js für Nebenprojekte.
Ich versuche eine responsive Navigationsleiste zu erstellen, die ein Hamburger-Menü anzeigt, wenn die Bildschirmgröße die durch Rückenwind definierte „sm“-Größe erreicht.
Wenn ich auf das Hamburger-Symbol klicke, möchte ich, dass das Menü von Höhe 0 auf max. h-40 wechselt.
Ich habe das Gefühl, dass mir im folgenden Code etwas Triviales fehlt. Hoffentlich können andere, die sich das ansehen, sehen, was mir fehlt?
navbar.tsx
"use client";
import Image from "next/image";
import Link from "next/link";
import {
useState
} from "react";
import logo from "../public/finallang_favicon.ico";
export default function Navbar() {
const [showMenu, setShowMenu] = useState(false);
const toggleMenu = () => {
setShowMenu(!showMenu);
};
return ( <
div >
<
nav className = "flex items-center justify-between flex-grow w-auto py-3 text-center border-b px-9 sm:w-auto" >
<
div className = "flex items-center justify-center flex-shrink-0 sm:mr-6" >
<
Link href = "/" >
<
Image src = {
logo
}
alt = "Logo"
width = {
48
}
height = {
48
}
/> <
/Link> <
/div> <
div className = "hidden text-sm sm:block" >
<
Link href = "#"
className = "block mt-4 sm:mr-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
About <
/Link> <
Link href = "#"
className = "block mt-4 sm:mr-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
Blog <
/Link> <
Link href = "#"
className = "block mt-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
Contact Me <
/Link> <
/div> <
div >
<
button className = "hidden px-4 py-2 text-sm leading-none rounded text-slate-100 hover:text-white sm:inline-block bg-brand" >
Download <
/button> <
button onClick = {
toggleMenu
}
aria - label = "Toggle navigation menu"
className = "text-gray-400 align-middle sm:hidden hover:text-gray-900 focus:ring-2 rounded-md" >
<
svg xmlns = "http://www.w3.org/2000/svg"
fill = "none"
viewBox = "0 0 24 24"
strokeWidth = {
2
}
stroke = "currentColor"
className = "w-6 h-6" >
<
path strokeLinecap = "round"
strokeLinejoin = "round"
d = "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" / >
<
/svg> <
/button> <
/div> <
/nav> {
showMenu &&
<
div className = {
`${showMenu ? "max-h-40" : "h-0"} text-sm text-center sm:hidden transition-all duration-500 ease-in-out overflow-hidden`
} >
<
Link href = "/about"
className = "block mt-4 text-slate-900 hover:text-slate-700" >
About <
/Link> <
Link href = "/blog"
className = "block mt-4 text-slate-900 hover:text-slate-700" >
Blog <
/Link> <
Link href = "/contact"
className = "block mt-4 text-slate-900 hover:text-slate-700" >
Contact Me <
/Link> <
/div>
} <
/div>
);
}
Dinge, die ich ausprobiert habe:
- Fügen Sie
height: "height"作为transitionPropertyzu meiner tailwind.config.js hinzu - Möglicherweise fehlenden
overflow-hiddenKlassennamen zu meiner Menüklasse hinzufügen - Wechseln Sie zwischen
transition-all和transition-[height]in der Klasse des Dropdown-Menüs
Aktuelles Verhalten: GIF des aktuellen Verhaltens
Was ich erwartet habe:
- Das Dropdown-Menü sollte innerhalb einer Dauer von 500 Millisekunden von der Höhe 0 auf eine maximale Höhe von 10rems (max.-h-40) übergehen, wobei die Übergangszeitfunktion „Ease-in“ verwendet wird.
