스티키 내비게이션 컴포넌트 - Neumorphic Pastel
Neumorphism 디자인 스타일과 파스텔 색 구성표가 있는 복잡하고 끈적한 탐색 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 중첩된 탐색 항목, 검색 창 및 다크 모드 지원 기능이 있으며, 모두 완전한 응답성을 위해 HTML 및 Tailwind CSS로 구현됩니다.
HTML 코드
<header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
<nav class="container mx-auto flex items-center justify-between flex-wrap">
<div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
<a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
<svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
<ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Features
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
</div>
</li>
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Guides
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
</div>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Community
</a>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Blog
</a>
</li>
</ul>
<div class="mt-4 lg:mt-0 flex items-center">
<div class="relative w-full lg:max-w-xs">
<input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
<svg class="h-5 w-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
<svg class="h-5 w-5" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
<a href="#" class="ml-4 p-1 rounded-full
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="sr-only">User Profile</span>
</a>
</div>
</div>
</nav>
</header>
<style>
/* Base light neumorphic shadows */
.shadow-neumorphic-light-sm {
box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
}
.shadow-neumorphic-light-md {
box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-light-xl {
box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
}
/* Inset light neumorphic shadows */
.shadow-neumorphic-inset-light {
box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
}
/* Base dark neumorphic shadows */
.dark .shadow-neumorphic-dark-sm {
box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
}
.dark .shadow-neumorphic-dark-md {
box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
}
.dark .shadow-neumorphic-dark-xl {
box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
}
/* Inset dark neumorphic shadows */
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
}
/* Override Tailwind shadow for header shadow-xl */
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
/* Hamburger menu JS to toggle content */
@media (max-width: 1023px) {
.lg\:hidden + div {
display: none;
}
.lg\:hidden + div.active {
display: block;
}
}
/* Simple JS for mobile menu and dark mode toggle */
document.addEventListener('DOMContentLoaded', () => {
const menuButton = document.querySelector('.lg\:hidden button');
const navCollapse = document.getElementById('navbar-collapse');
const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');
// Mobile menu toggle
if (menuButton && navCollapse) {
menuButton.addEventListener('click', () => {
navCollapse.classList.toggle('hidden');
if (!navCollapse.classList.contains('hidden')) {
navCollapse.classList.add('active'); // Add active for custom CSS display
} else {
navCollapse.classList.remove('active');
}
});
}
// Dark mode toggle
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Save preference (optional)
if (document.documentElement.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Apply saved theme on load (optional)
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Close dropdowns when clicking outside (basic, for demonstration)
document.addEventListener('click', (e) => {
document.querySelectorAll('.group.relative').forEach(dropdown => {
if (!dropdown.contains(e.target)) {
dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
dropdown.querySelector('a svg')?.classList.remove('rotate-180');
}
});
});
// For accessibility/keyboard navigation for dropdowns (complex; basic example)
document.querySelectorAll('.group.relative > a').forEach(link => {
link.addEventListener('focus', () => {
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
});
link.addEventListener('blur', (event) => {
if (!link.parentElement.contains(event.relatedTarget)) {
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
}
});
});
});
<\/style>관련 구성 요소
Sticky Navigation 구성 요소
미니멀한 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로 소셜 미디어 애플리케이션에 적합합니다.
레트로 이커머스 스티키 내비게이션
Tailwind CSS를 사용하여 생생한 색상, 복잡한 요소, 응답성 및 다크 모드를 지원하는 전자 상거래 사이트를 위한 레트로/빈티지 고정 탐색 구성 요소입니다.
Sticky Navigation 구성 요소
Sticky Navigation Component는 Skeuomorphism 디자인, 반응형 및 어두운 테마를 지원합니다. Tailwind CSS를 사용합니다.