Скевоморфное меню для гамбургеров
Адаптивный компонент Hamburger Menu, разработанный со скевоморфными элементами, яркими цветами и поддержкой темных тем для сайтов электронной коммерции.
HTML-код
<div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
<h1 class="text-white text-lg font-bold">ShopEasy</h1>
</div>
<button class="text-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
<a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
<a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
<a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
<a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
<a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>
<div class="md:hidden">
<div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
<a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
<a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
<a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
<a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
<a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>
</div>
Связанные компоненты
Компонент гамбургер-меню
Отзывчивый компонент меню гамбургера, разработанный в стиле Material Design с поддержкой темных тем, подходит для навигации по приборной панели.
Компонент гамбургер-меню
Адаптивный компонент меню гамбургера, разработанный в 3D-стиле, подходит для использования на приборной панели. Он включает в себя триадическую цветовую гамму и имеет сложный интерфейс с интерактивными элементами, поддерживая как светлую, так и темную тематику.
Ретро меню для гамбургеров в электронной коммерции
Сложный, отзывчивый, поддерживаемый темным режимом компонент меню гамбургеров для электронной коммерции, выполненный в стиле ретро/винтаж (80-е/90-е) и комплементарная цветовая схема (фиолетовый, голубой, золотой). Включает в себя основную навигацию, ссылки на аккаунты, корзину, поиск и чистый переключатель CSS с помощью хака с флажком. Использует классы CSS Tailwind.