{"id":13242,"date":"2026-11-01T09:18:08","date_gmt":"2026-11-01T00:18:08","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=13242"},"modified":"2026-11-01T12:59:00","modified_gmt":"2026-11-01T03:59:00","slug":"webui-tailwind-nextjs-7","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/11\/01\/webui-tailwind-nextjs-7\/","title":{"rendered":"[WebUI]Tailwind + nextj(Hamburger+Slide Menu) \u2013 7"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \ud584\ubc84\uac70 \uba54\ub274\uc640 \uc2ac\ub77c\uc774\ub4dc \uba54\ub274\ub97c \uacb0\ud569\ud55c \ud615\ud0dc\uc758 \uba54\ub274\uc785\ub2c8\ub2e4.
This is a menu format that combines a hamburger menu with a slide-out menu.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ud584\ubc84\uac70 \uba54\ub274\ub97c \ud074\ub9ad\ud558\uba74 \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.
Clicking the hamburger menu reveals a slide-out menu.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\ub294 \uc6b0\uce21\ub610\ub294 \uc88c\uce21\uc5d0\uc11c \ub098\ud0c0\ub098\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
The slide menu can be set to appear from either the right or the left side.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ubd80\ub4dc\ub7ec\uc6b4 \uba54\ub274\uc5f4\ub9bc \ub2eb\ud798\uc744 \uc704\ud574\uc11c css\uc640 tailwindcss\ub97c \ud63c\ud569\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
To ensure smooth opening and closing of the menu, a combination of CSS and Tailwind CSS is used.<\/p>\n\n\n\n

\ud83d\udcc1 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870 \/ Directory structure<\/p>\n\n\n\n

tailwindcss-nextjs\/\n\u2514\u2500\u2500 app\/\n    \u251c\u2500\u2500 layout.tsx\n    \u251c\u2500\u2500 page.tsx (\ub8e8\ud2b8 \/)\n    \u251c\u2500\u2500 globals.css\n    \u251c\u2500\u2500 favicon.ico\n    \u2502\n    \u251c\u2500\u2500 ui\/                             \n    \u2502   \u251c\u2500\u2500 page.tsx                   \n    \u2502   \u2514\u2500\u2500 _components\/\n    \u2502       \u251c\u2500\u2500 button.tsx\n    \u2502       \u251c\u2500\u2500 dropdown.tsx\n    \u2502       \u2514\u2500\u2500 navigation\/\n    \u2502           \u251c\u2500\u2500 HorizontalNavMenu.tsx  \n    \u2502           \u251c\u2500\u2500 MegaMenu.tsx          \n    \u2502           \u2514\u2500\u2500 Hamburger-Drawer.tsx<\/strong>  # hamberger-drawer\n    \u2502\n    \u251c\u2500\u2500 hamberger-drawer<\/strong>\/         \n    \u2502   \u251c\u2500\u2500 page.tsx                     # \/hamberger-drawer\n    \u2502   \u2514\u2500\u2500 game\/\n    \u2502       \u2514\u2500\u2500 page.tsx                 # \/hamberger-drawer\/game\n    \u2502\n    \u2514\u2500\u2500 button-css\/ , button-tailwind\/ ... ...<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\uc124\uc815 \/ Slide Menu Settings<\/p>\n\n\n\n
\u2714\ufe0f \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\ub97c \uc624\ub978\ucabd \ub610\ub294 \uc67c\ucabd\uc5d0\uc11c \ub098\uc624\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can have the slide menu appear from either the right or the left.<\/p>\n\n\n\n
1)\uc624\ub978\ucabd\uc5d0\uc11c \ub098\uc624\uac8c \uc124\uc815 \/ Set it to appear from the right<\/p>\n\n\n\n
... ...\n          {\/** \uc624\ub978\ucabd\uc5d0\uc11c \uba54\ub274 \ub098\uc624\ub294 \uc124\uc815 \/ Setting to make the menu appear from the right *\/}\n        <div className={`fixed top-0 right-0 h-full w-[300px] bg-white z-50 shadow-2xl flex flex-col ${open ? 'animate-slide-in' : 'animate-slide-out'}`}>\n          \n... ...\n <style>{`\n        \/* \ub4e4\uc5b4\uac08 \ub54c - \uc624\ub978\ucabd \/ When entering from the right *\/\n        @keyframes slide-in {\n          from { transform: translateX(100%); }\n          to { transform: translateX(0); }\n        }\n... ...\n        \/* \ub098\uac08 \ub54c-\uc624\ub978\ucabd \/ When exiting to the right *\/\n        @keyframes slide-out {\n          from { transform: translateX(0); }\n          to { transform: translateX(100%); }\n        }\n... ...\n`}<\/style>\n... ...<\/code><\/pre>\n\n\n\n
2)\uc67c\ucabd\uc5d0\uc11c \ub098\uc624\uac8c \uc124\uc815 \/ Set it to appear from the left<\/p>\n\n\n\n
... ...\n{\/* \uc67c\ucabd\uc5d0\uc11c \uba54\ub274 \ub098\uc624\ub294 \uc124\uc815 \/ Setting to make the menu appear from the left *\/}\n<div className={`fixed top-0 left-0 h-full w-[300px] bg-white z-50 shadow-2xl flex flex-col ${open ? 'animate-slide-in' : 'animate-slide-out'}`}> \n\n... ...\n      <style>{`\n... ...\n\n        \/* \ub4e4\uc5b4\uac08 \ub54c - \uc67c\ucabd \/ When entering from the left *\/\n        \/*@keyframes slide-in {\n           from { transform: translateX(-100%); }\n           to { transform: translateX(0); }\n        }*\/\n... ...\n        \/* \ub098\uac08 \ub54c-\uc67c\ucabd \/ When exiting to the left *\/\n       \/* @keyframes slide-out {\n          from { transform: translateX(0); }\n          to { transform: translateX(-100%); }\n        } *\/\n      `}<\/style>\n... ...<\/code><\/pre>\n\n\n\n
3)top-0\uc740 \uc704\uc5d0\uc11c 0px\ub9cc\ud07c \uc704\uce58 ,right-0\ub294 \uc624\ub978\ucabd\uc5d0\uc11c 0px\ub9cc\ud07c \uc704\uce58,left-0\ub294 \uc67c\ucabd\uc5d0\uc11c 0px\ub9cc\ud07c \uc704\uce58 \ud558\ub3c4\ub85d \uc124\uc815
top-0<\/code> sets the position to 0px from the top, right-0<\/code> sets it to 0px from the right, and left-0<\/code> sets it to 0px from the left.<\/p>\n\n\n\n
\ud83d\udcc1 \uba54\ub274 \ub79c\ub354\ub9c1 \uc0c1\ud0dc \/ Menu rendering state<\/p>\n\n\n\n
... ...\nconst [render, setRender] = useState(false) \n... ...\n  useEffect(() => {\n    if (open) {\n      setRender(true)\n      document.body.style.overflow = 'hidden'\n    } else {\n      \/\/ \uba54\ub274 \ub2eb\uc744\ub54c , 0.3\ucd08 \ud6c4\uc5d0 setRender\ud568\uc218 \uc2e4\ud589 \n      \/\/ When closing the menu, execute the `setRender` function after 0.3 seconds.\n      const t = setTimeout(() => setRender(false), 300)\n      document.body.style.overflow = ''\n      return () => clearTimeout(t)\n    }\n  }, [open])\n... ...<\/code><\/pre>\n\n\n\n
1)\uba54\ub274\uac00 \uc5f4\ub9ac\uace0 \ub2eb\ud798\uc5d0 \ub530\ub77c setRender\ud568\uc218\ub85c \uba54\ub274 \ub79c\ub354\ub9c1 \uc0c1\ud0dc\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.
The rendering state of the menu is managed using the setRender<\/code> function as the menu opens and closes.<\/p>\n\n\n\n
2)\uba54\ub274\uac00 \uc624\ud508 \ub418\uc5c8\uc744\ub54c\ub294 \ubc18\ud22c\uba85 \ubc30\uacbd\ub4a4\uc758 \ud654\uba74 \uc2a4\ud06c\ub864\uc744 \uc228\uae40\ucc98\ub9ac\ud558\uace0 \uba54\ub274\uac00 \ub2eb\ud788\uba74 \uc2a4\ud06c\ub864 \uc0ac\uc6a9\uac00\ub2a5\ud558\uac8c \uc124\uc815\ud569\ub2c8\ub2e4.
When the menu is opened, scrolling on the screen behind the semi-transparent background is disabled; when the menu is closed, scrolling is re-enabled.<\/p>\n\n\n\n
# \uba54\ub274\uac00 \uc5f4\ub9bc\uc778 \uacbd\uc6b0 \/ When the menu is open\ndocument.body.style.overflow = 'hidden'\n\n# \uba54\ub274\uac00 \ub2eb\ud798\uc778 \uacbd\uc6b0 \/ When the menu is closed\ndocument.body.style.overflow = ''<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ud584\ubc84\uac70 \uba54\ub274 \uc5f4\ub9bc\/\ub2eb\ud798 \ubc84\ud2bc
Hamburger menu open\/close button<\/p>\n\n\n\n
... ... \n<button onClick={() => setOpen(true)} className=\"w-11 h-11 bg-black text-white rounded-full\">\u2630<\/button>\n... ...\n<button onClick={() => setOpen(false)} className=\"w-9 h-9 bg-gray-100 rounded-full\">\u2715<\/button>\n... ...<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc2ac\ub77c\uc774\ub4dc \uba54\ub274 \uc5f4\ub9bc\/\ub2eb\ud798
Open\/close slide menu<\/p>\n\n\n\n
... ...\n{render && ( ... \n...)}\n... ...<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc2a4\ud0c0\uc77c \/ <\/p>\n\n\n\n
\u2714\ufe0f \uc2ac\ub77c\uc774\ub4dc \uba54\ub274 \uc228\uae40,\ub098\ud0c0\ub098\uae30
Hide\/show slide menu<\/p>\n\n\n\n
... ... \n  from { transform: translateX(100%); } \/\/ \uc2dc\uc791 \/ start\n  to { transform: translateX(0); } \/\/ \ub05d \/ end\n... ...<\/code><\/pre>\n\n\n\n
1)\uc2ac\ub77c\uc774\ub4dc \uba54\ub274\uac00 \uc2dc\uc791 \uc704\uce58 \ubd80\ud130 \ub05d \uc704\uce58\uae4c\uc9c0 \uc774\ub3d9\ud569\ub2c8\ub2e4.
The slide menu moves from the starting position to the end position.<\/p>\n\n\n\n
2)100%\ub294 \uc2ac\ub77c\uc774\ub4dc \uba54\ub274\uc758 \uc804\uccb4 \ud06c\uae30\uc785\ub2c8\ub2e4.
100% is the full size of the slide menu.<\/p>\n\n\n\n
3)\uc989 \uba54\ub274 \uc228\uaca8\uc84c\ub2e4\uac00 \uba54\ub274 \uc804\uccb4\uac00 0px\ub5a8\uc5b4\uc9c4 \uc704\uce58\ub9cc\ud07c \uc774\ub3d9\ud558\ub294 \uc124\uc815\uc785\ub2c8\ub2e4.
In other words, this setting involves the menu starting out hidden and then shifting by a distance of 0px.<\/p>\n\n\n\n
4)\uba54\ub274\uc758 \ubc29\ud5a5\uc740 div\ucf54\ub4dc\uc5d0\uc11c right-0\ub610\ub294 left-0\uac00 \ucd08\uae30 \uba54\ub274\uc758 \uc704\uce58\uc785\ub2c8\ub2e4. \uc774 \ubd80\ubd84\uc5d0\uc11c \uba54\ub274 \uc774\ub3d9 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2dc\uc791\ub429\ub2c8\ub2e4.
The direction of the menu is determined by the right-0<\/code> or left-0<\/code> setting in the div<\/code> code, which defines the initial position of the menu. The animation for the menu’s movement begins from this point.<\/p>\n\n\n\n
<div className={`fixed top-0 right-0 h-full w-[300px] ... ...${open ? 'animate-slide-in' : 'animate-slide-out'}`}>\n... ...\n<\/div>\n          <\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc560\ub2c8\uba54\uc774\uc158 \ud615\ud0dc \/ Animation format<\/p>\n\n\n\n
... ...\n        @keyframes fade-in {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n... ...\n        @keyframes fade-out {\n          from { opacity: 1; }\n          to { opacity: 0; }\n        }\n... ...<\/code><\/pre>\n\n\n\n
1)\ud398\uc774\ub4dc \uc778(\ucc9c\ucc9c\ud788 \ub098\ud0c0\ub0a8),\ud398\uc774\ub4dc \uc544\uc6c3(\ucc9c\ucc9c\ud788 \uc0ac\ub77c\uc9d0) \uc124\uc815\uc785\ub2c8\ub2e4.
These are the settings for fade-in (appearing gradually) and fade-out (disappearing gradually).<\/p>\n\n\n\n
2)opacity\uac00 0\uc774\uba74 \ud22c\uba85,1\uc774\uba74 \ubd88\ud22c\uba85\uc774\uace0 0.5\uc774\uba74 \ubc18\ud22c\uba85\uc785\ub2c8\ub2e4.
An opacity value of 0 is transparent, 1 is opaque, and 0.5 is semi-transparent.<\/p>\n\n\n\n
... ...\n        .animate-slide-in { animation: slide-in 0.3s ease-out forwards; }\n        .animate-slide-out { animation: slide-out 0.3s ease-out forwards; }\n        .animate-fade-in { animation: fade-in 0.3s ease-out forwards; }\n        .animate-fade-out { animation: fade-out 0.3s ease-out forwards; }\n... ...<\/code><\/pre>\n\n\n\n
1)\uc2ac\ub77c\uc774\ub4dc\uc778,\uc2ac\ub77c\uc774\ub4dc\uc544\uc6c3 \ub610\ub294 \ud398\uc774\ub4dc\uc778,\ud398\uc774\ub4dc\uc544\uc6c3\ud560\ub54c \uc138\ubd80\uc124\uc815\uc785\ub2c8\ub2e4.
These are the detailed settings for slide-in, slide-out, fade-in, or fade-out effects.<\/p>\n\n\n\n
2)0.3s\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc18d\ub3c4,ease-out\uc740 \uc560\ub2c8\uba54\uc774\uc158 \uad6c\ud604\uc911 \uc18d\ub3c4\ud615\ud0dc,forward\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ub05d\ub09c \ud6c4\uc758 \uc0c1\ud0dc\uc785\ub2c8\ub2e4.
‘0.3s’ is the animation duration, ‘ease-out’ is the speed pattern during the animation, and ‘forwards’ defines the state after the animation has finished.<\/p>\n\n\n\n
3)ease-out\uc740 \ucc98\uc74c\uc5d4 \ube60\ub974\uac8c, \ub05d\uc5d0\uc11c \ucc9c\ucc9c\ud788 \uc2e4\ud589\ub429\ub2c8\ub2e4.\uc774 \uc678\uc5d0\ub3c4 ease-in,ease-in-out,linear\ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4.
‘ease-out’ starts quickly and slows down toward the end. Other options include ‘ease-in’, ‘ease-in-out’, and ‘linear’.<\/p>\n\n\n\n
4)forwards\uc124\uc815\uc774 \uc5c6\uc73c\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub09c\ud6c4 \ucc98\uc74c\uc73c\ub85c \ub3cc\uc544\uac11\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub09c\ud6c4 \uba54\ub274\uac00 \uc5f4\ub9bc\uc0c1\ud0dc\ub85c \uc720\uc9c0\ud558\ub824\uba74 forwards \uc124\uc815\uc774 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.
If the ‘forwards’ setting is not used, the animation will return to its initial state after it finishes.
To keep the menu in an open state after the animation finishes, you must include the forwards<\/code> setting.<\/p>\n\n\n\n
\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n
\u2714\ufe0f PC<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2714\ufe0f Mobile<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n
\ub9c8\ud0dc\ubcf5\uc74c 21\uc7a5 22\uc808 \/ Matthew 21: 22<\/p>\n\n\n\n
“\ub108\ud76c\uac00 \uae30\ub3c4\ud560 \ub54c\uc5d0 \ubb34\uc5c7\uc774\ub4e0\uc9c0 \ubbff\uace0 \uad6c\ud558\ub294 \uac83\uc740 \ub2e4 \ubc1b\uc73c\ub9ac\ub77c \ud558\uc2dc\ub2c8\ub77c”<\/p>\n\n\n\n
“And everything you ask in prayer, believing, you will receive.”<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \ud584\ubc84\uac70 \uba54\ub274\uc640 \uc2ac\ub77c\uc774\ub4dc \uba54\ub274\ub97c \uacb0\ud569\ud55c \ud615\ud0dc\uc758 \uba54\ub274\uc785\ub2c8\ub2e4.This is a menu format that combines a hamburger menu with a slide-out menu. \ud83d\udc49\ud83c\udffb \ud584\ubc84\uac70 \uba54\ub274\ub97c \ud074\ub9ad\ud558\uba74 \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.Clicking the hamburger menu reveals a slide-out menu. \ud83d\udc49\ud83c\udffb \uc2ac\ub77c\uc774\ub4dc\uba54\ub274\ub294 \uc6b0\uce21\ub610\ub294 \uc88c\uce21\uc5d0\uc11c \ub098\ud0c0\ub098\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.The slide menu can be set to appear from either the right or the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,1,7,29],"tags":[],"class_list":["post-13242","post","type-post","status-publish","format-standard","hentry","category-news","category-nextjs","category-uncategorized","category-website","category-webui","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/13242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=13242"}],"version-history":[{"count":45,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/13242\/revisions"}],"predecessor-version":[{"id":13293,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/13242\/revisions\/13293"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=13242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=13242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=13242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}