ブルータリズムEコマースナビゲーション
Tailwind CSSで構築された、グレースケールの配色、複雑なレイアウト、応答性、ダークモードのサポートを特徴とする、eコマース用のブルータリズムスタイルのナビゲーションコンポーネント。
HTMLコード
<nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
<div class="block lg:hidden">
<button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
<svg class="h-6 w-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 12h16m-4 6h4"></path>
</svg>
</button>
</div>
<div id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
<ul class="uppercase text-sm lg:flex-grow">
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
</ul>
<div class="flex items-center mt-4 lg:mt-0">
<input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
<a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
</div>
</div>
</div>
</nav>
<script>
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>