CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション Eコマースサイドバーナビゲーション

Eコマースサイドバーナビゲーション

Tailwind CSSで構築された、トライアドカラースキーム、ホバー時のマイクロインタラクション、ダークモードのサポートを特徴とする、eコマースWebサイト用のシンプルでレスポンシブなサイドバーナビゲーションコンポーネント。

プレビュー

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>

関連コンポーネント

ソーシャルメディアサイドバーナビゲーションコンポーネント

レスポンシブ ソーシャル メディア サイドバー ナビゲーション コンポーネント ダーク テーマ ブルータリズム、アース トーン、および複雑なデザイン原則を使用したサポート。JavaScript は必要ありません。

開ける

Gaming_Sidebar_Navigation_Component

ゲームWebサイト用のレスポンシブサイドバーナビゲーションコンポーネントで、高コントラスト、ダークモードのサポート、インタラクティブ要素を備えたモノスペース/開発者に触発されたデザインが特徴です。ゲームインターフェースやコミュニティポータルに最適です。

開ける

サイドバーナビゲーションコンポーネント - Memphis Muted (ミュート)

メンフィスのデザインに触発された複雑でレスポンシブなサイドバーナビゲーションコンポーネントで、落ち着いた配色で、ドキュメントやWikiサイトに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

開ける