메가 메뉴 구성 요소 - 소셜 미디어
반응형 다크 모드 지원 메가 메뉴 구성 요소는 소셜 미디어 애플리케이션용으로 설계되었으며, 그레이스케일 색 구성표의 머티리얼 디자인 미학을 따릅니다. 여기에는 트렌드, 카테고리 및 프로필에 대한 섹션이 포함되어 있습니다.
HTML 코드
<nav x-data="{ open: false, categoryOpen: false, resourcesOpen: false }" class="bg-white shadow-md dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">SocialFeed</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-gray-500 text-gray-900 dark:text-white dark:border-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<div class="relative" x-data="{ openCategory: false }" @click.away="openCategory = false">
<button @click="openCategory = !openCategory" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-500 transition duration-150 ease-in-out">
Categories
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="openCategory" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-50 mt-2 w-full max-w-sm sm:max-w-md lg:max-w-3xl left-1/2 -ml-32 sm:-ml-48 lg:-ml-64 px-2 sm:px-0 lg:px-8">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-800 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Trending Categories</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M21 8h-4m4 8h-4M10 4h4v16h-4V4z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Technology</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Latest gadgets and tech news.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7zm0 0V5c0-1.1.9-2 2-2h2M4 7h4m-4 8v2c0 1.1.9 2 2 2h2m-4-2H4m16-12v2c0 1.1-.9 2-2 2h-2m4-2h-4m-4 0h-4m0 0V5c0 1.1-.9 2-2 2h-2" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Gaming</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">New releases and esports updates.</p>
</div>
</a>
</div>
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Explore By Interest</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Art & Culture</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Dive into the world of creativity.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Science</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discover new breakthroughs.</p>
</div>
</a>
</div>
<div class="lg:col-span-1">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Featured Communities</p>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/237/50/50" alt="Community Avatar">
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Photography Enthusiasts</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Share your best shots.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1025/50/50" alt="Community Avatar">
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Bookworms United</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discuss your favorite books.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trending</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative" x-data="{ openProfile: false }" @click.away="openProfile = false">
<div>
<button type="button" class="max-w-xs bg-white dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="openProfile = !openProfile">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
</button>
</div>
<div x-show="openProfile" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400" aria-controls="mobile-menu" aria-expanded="false" @click="open = !open">
<span class="sr-only">Open main menu</span>
<svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg x-show="open" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu" x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-gray-50 dark:bg-gray-700 border-gray-500 text-gray-700 dark:text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<div x-data="{ subOpen: false }">
<button @click="subOpen = !subOpen" class="flex items-center justify-between w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 border-l-4 border-transparent focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-400 dark:focus:text-gray-200 dark:focus:bg-gray-700 dark:focus:border-gray-500 transition duration-150 ease-in-out">
<span>Categories</span>
<svg class="h-5 w-5 transition-transform" :class="{'transform rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div x-show="subOpen" class="mt-2 space-y-1 pl-6 pr-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Technology</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Gaming</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Art & Culture</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Science</a>
</div>
</div>
<a href="#" class="border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trending</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800 dark:text-white">John Doe</div>
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
<div class="mt-3 space-y-1">
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>