Home
nejaa badr
Sidebar

Sidebar

This HTML file includes:

1. A responsive sidebar with 3D animation effects:

1. The sidebar slides in and out smoothly.
2. Navigation items have a 3D hover effect using CSS transforms and transitions.

2. Tailwind CSS for styling:

1. Included via CDN for easy setup.
2. Used for layout, colors, and basic styling.

3. Custom CSS for animations and 3D effects:

1. Keyframe animations for sidebar open/close.
2. 3D transform effects for nav items.

4. JavaScript for interactivity:

1. Toggles the sidebar open and close.
2. Adds 3D effect to nav items on hover using mouse position.
3. Closes the sidebar when clicking outside.

5. Accessibility features:

1. ARIA label for the toggle button.
2. Keyboard navigation support (Enter/Space to toggle sidebar).
3. Focus trapping within the sidebar when open.

6. Responsive design:

1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views.

This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar

Author nejaa badr

2.4k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animated Sidebar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        @keyframes slideOut {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }
        .sidebar-open {
            animation: slideIn 0.3s forwards;
        }
        .sidebar-closed {
            animation: slideOut 0.3s forwards;
        }
        .nav-item {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .nav-item:hover {
            transform: translateZ(10px);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-indigo-800 text-white p-5 transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
        <h2 class="text-2xl font-bold mb-5">Dashboard</h2>
        <nav>
            <ul class="space-y-3">
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Analytics</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Customers</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Settings</a></li>
            </ul>
        </nav>
    </div>

<div class="p-5">
        <button id="sidebarToggle" class="bg-indigo-800 text-white p-2 rounded" aria-label="Toggle Sidebar">
            <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 12h16M4 18h16" />
            </svg>
        </button>
        <main class="mt-5">
            <h1 class="text-3xl font-bold mb-4">Welcome to the Dashboard</h1>
            <p>This is the main content area. Use the button above to toggle the sidebar.</p>
        </main>
    </div>

sidebarToggle.addEventListener('click', toggleSidebar);

// Close sidebar when clicking outside
        document.addEventListener('click', (event) => {
            if (isOpen && !sidebar.contains(event.target) && event.target !== sidebarToggle) {
                toggleSidebar();
            }
        });

// Add 3D effect to nav items
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('mousemove', (e) => {
                const rect = item.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                item.style.transform = `perspective(1000px) rotateX(${(y - rect.height / 2) / 10}deg) rotateY(${-(x - rect.width / 2) / 10}deg) translateZ(10px)`;
            });

item.addEventListener('mouseleave', () => {
                item.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
            });
        });

// Keyboard accessibility
        sidebarToggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                toggleSidebar();
            }
        });

// Trap focus within sidebar when open
        sidebar.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                const focusableElements = sidebar.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
                const firstElement = focusableElements[0];
                const lastElement = focusableElements[focusableElements.length - 1];

if (e.shiftKey && document.activeElement === firstElement) {
                    e.preventDefault();
                    lastElement.focus();
                } else if (!e.shiftKey && document.activeElement === lastElement) {
                    e.preventDefault();
                    firstElement.focus();
                }
            }
        });
    </script>
</body>
</html>

Related Examples