Glassmorphism メガメニューコンポーネント
ダッシュボードのGlassmorphismメガメニューは、トライアドの配色とインターフェースします。すりガラス効果、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。
HTMLコード
<nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
<div class="hidden md:flex space-x-6">
<div class="relative group">
<button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
<div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
</div>
</div>
</div>
<div class="relative group">
<button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
<div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
</div>
<button class="md:hidden text-gray-800 dark:text-gray-200 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<div class="hidden md:hidden mobile-menu">
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
</div>
</nav>関連コンポーネント
レトロヴィンテージメガメニュー
80年代と90年代の美学に触発されたレトロ/ビンテージスタイルでデザインされたレスポンシブなメガメニューコンポーネントで、ダークテーマのサポートとプレースホルダー画像が特徴です。
メガメニューコンポーネント
Skeuomorphism でスタイル設定されたレスポンシブ Mega Menu コンポーネントで、Tailwind CSS を使用したダーク テーマのサポートが特徴です。
レトロなメガメニュー
レスポンシブエフェクトとダークテーマのサポートを備えたレトロ/ビンテージスタイルのメガメニューコンポーネントで、Tailwind CSSを使用して実装されています。JavaScriptは含まれていません。ダークモードは純粋にCSSで処理されます。