카테고리

고정 탐색

스크롤할 때 계속 표시되는 탐색

Sticky Navigation 구성 요소

Sticky Navigation Component는 Skeuomorphism 디자인, 반응형 및 어두운 테마를 지원합니다. Tailwind CSS를 사용합니다.

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">SkeuoNav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
    </ul>
  </div>

</nav>

Sticky Navigation 구성 요소

머티리얼 디자인 가이드라인을 따르는 반응형 고정 탐색 메뉴로, 다크 모드를 제공합니다.

미리보기 열기

                <header class="bg-white dark:bg-gray-800 shadow fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-2 text-xl font-semibold text-gray-800 dark:text-white">MyWebsite</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Services</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="pt-16 bg-gray-100 dark:bg-gray-900">
    <section class="container mx-auto py-10">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Welcome to MyWebsite</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a simple sticky navigation component built with Tailwind CSS. Scroll down to see the sticky effect in action.</p>
        <div class="mt-10 space-y-4">
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
        </div>
    </section>
</main>

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 고정 탐색 구성 요소로, 어두운 테마를 특징으로 하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1f2937;
        }
    }
</style>