メガメニューコンポーネント
ブログ/コンテンツ Web サイト用のニューモーフィズム スタイルのメガ メニュー コンポーネントで、類似の配色と中程度の複雑さを使用します。ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。
HTMLコード
<nav class="bg-gray-200 dark:bg-gray-800 transition-colors duration-300 ease-in-out">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Name</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Home</a>
<div class="relative group">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Categories</button>
<div class="absolute z-10 left-0 mt-2 w-60 bg-gray-200 dark:bg-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 ease-in-out neu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Technology</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Travel</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Food</a>
</div>
</div>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Contact</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 neu neu-pressed">
<span class="sr-only">Open main menu</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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Home</a>
<div class="group">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left neu neu-pressed">Categories</button>
<div class="pl-4 mt-2 space-y-1">
<a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Technology</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Travel</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Food</a>
</div>
</div>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Contact</a>
</div>
</div>
<style>
.neu {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .neu {
box-shadow: 5px 5px 10px #4b4b4b, -5px -5px 10px #333333;
}
.neu-pressed {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .neu-pressed {
box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
}
</style>
</nav>関連コンポーネント
メガメニューコンポーネント
ダークモードUI、類似の配色、およびダッシュボード用の複雑な複雑さを備えたメガメニューコンポーネント、Tailwind CSSを使用。レスポンシブであり、Tailwind dark:プレフィックスを使用してダークテーマをサポートする必要があります。JavaScript コードは不要で、HTML と Tailwind クラスのみ。画像はpicsum.photosから、アバターは randomuser.me から引用しています。
メガメニューコンポーネント
Tailwind CSSで設計されたレスポンシブなMega Menuコンポーネントで、魅力的なアニメーションとダークテーマのサポートのためのマイクロインタラクションを備えています。
メガメニューコンポーネント
ブログ/コンテンツ消費用に設計されたレスポンシブなメガメニューコンポーネントで、マイクロインタラクションとアーストーンの色に焦点を当て、Tailwind CSSを使用したダークモードをサポートしています。