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

Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

10.3k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

1 year ago

2.3k
sidebar orange colour

Author:
Abhishek Kumar

6 months ago

804
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.2k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

9 months ago

1.1k
sidebar

Author:
Abhishek Kumar

6 months ago

547
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
Tailwind Sidebar Layout

Author:
Junior Gauze

1 year ago

1.9k
Dashboard sidebar

Author:
farid

1 year ago

4.7k
Sidebar Off canvas
How it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.

Author:
Juan D. Cortorreal

3 months ago

371
gallary
html , css

Author:
Hacker Development

9 months ago

844
Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components