CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 E-commerce Sidebar 내비게이션

E-commerce Sidebar 내비게이션

전자 상거래 웹 사이트를 위한 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 트라이어드 색 구성표, 호버링의 마이크로 인터랙션, 다크 모드 지원을 특징으로 하며 Tailwind CSS로 구축되었습니다.

미리 보기

HTML 코드 

<div class="flex">
  <!-- Sidebar (Hidden on mobile, shown on desktop) -->
  <aside id="sidebar" class="bg-blue-500 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
    <a href="#" class="text-white flex items-center space-x-2 px-4">
      <span class="text-2xl font-extrabold">E-Shop</span>
    </a>

    <nav>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Home
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Products
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Categories
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Cart
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Account
      </a>
    </nav>
  </aside>

  <!-- Content area -->
  <div class="flex-1 p-10">
    <!-- A button to toggle the sidebar on mobile -->
    <button id="sidebar-toggle" class="text-blue-700 dark:text-blue-300 focus:outline-none md:hidden">
      <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>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">Welcome to E-Shop</h1>
    <!-- Your main content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. Add your product listings, categories, etc. here.</p>
  </div>
</div>

<!-- Add this script at the end of the body tag -->
<script>
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');

  sidebarToggle.addEventListener('click', () => {
    sidebar.classList.toggle('-translate-x-full');
  });
</script>

관련 구성 요소

Brutalism 사이드바 탐색

흙색, 적당한 복잡성, 응답성 및 다크 모드 지원을 제공하는 브루탈리즘 스타일의 사이드바 탐색 구성 요소로, Tailwind CSS를 사용하는 블로그/콘텐츠 사이트용으로 설계되었습니다.

열다

Sidebar Navigation 구성 요소

블로그에 맞게 조정된 사이드바 탐색 구성 요소로, 3D 요소와 생생한 색상으로 디자인되었습니다. 다크 모드를 지원하고 반응형이며 콘텐츠 소비에 적합한 간단한 레이아웃을 특징으로 합니다.

열다

사이드바 탐색 구성 요소 - 농업/농업

농업/농업 웹사이트를 위해 설계된 복잡하고 미니멀한 사이드바 탐색 구성 요소입니다. 보석 같은 색조의 색상, 완전한 반응성, 다크 모드 지원, 농업 상황의 대시보드 및 관리 시스템에 적합한 여러 대화형 요소를 갖추고 있습니다.

열다