INTERACCIÓN DE LA BARRA LATERAL

22 kevekıbhack

Abrir en el editor Video Publica tu código

Recomendado

2 July 2025

Código HTML del interruptor de palanca CSS

7 December 2024

Un código de securecode394

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Interaction - Düzenlenmiş</title>

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    transition:background 0.3s ease;
}

.sidebar{
    width:280px;
    height:600px;
    background:#ffffff;
    border-radius:24px;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.sidebar.shrink{
    width:95px;
}

.sidebar.shrink .menu span,
.sidebar.shrink .profile span,
.sidebar.shrink .theme-toggle {
    opacity:0;
    width:0;
    display:none;
}

.sidebar.shrink .menu i {
    font-size:20px;
    margin:0 auto;
}

.sidebar.shrink .menu li {
    justify-content:center;
    padding:12px 0;
}

.sidebar.shrink .profile {
    justify-content:center;
    padding:10px 0;
}

.sidebar.shrink .profile img {
    margin:0;
}

.theme-toggle{
    display:flex;
    background:#f1f5f9;
    border-radius:50px;
    padding:4px;
    margin-bottom:30px;
    transition:0.3s;
}

.theme-toggle button{
    flex:1;
    padding:10px 8px;
    border:none;
    background:transparent;
    border-radius:50px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s ease;
}

.theme-toggle button.active{
    background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    color:#0f172a;
}

.theme-toggle button i {
    margin-right:5px;
}

.menu{
    list-style:none;
    margin-bottom:20px;
}

.menu li{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px 16px;
    border-radius:12px;
    cursor:pointer;
    transition:all 0.2s ease;
    margin-bottom:4px;
    color:#334155;
}

.menu li:hover{
    background:#f1f5f9;
    transform:translateX(5px);
}

.menu li.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
}

.menu i{
    font-size:20px;
    width:24px;
    text-align:center;
}

.menu span{
    font-size:15px;
    font-weight:500;
    transition:opacity 0.3s ease;
    white-space:nowrap;
}

.profile{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    padding:12px;
    border-radius:16px;
    transition:0.3s;
    border:1px solid #e2e8f0;
}

.profile img{
    width:40px;
    height:40px;
    border-radius:12px;
    object-fit:cover;
    border:2px solid white;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.profile span{
    font-weight:600;
    font-size:14px;
    color:#1e293b;
    transition:opacity 0.3s ease;
    white-space:nowrap;
}

.profile-info {
    display:flex;
    flex-direction:column;
    transition:0.3s;
}

.profile-role {
    font-size:12px;
    color:#64748b;
    transition:0.3s;
}

.toggle-btn{
    position:absolute;
    right:-12px;
    top:50%;
    transform:translateY(-50%);
    background:#ffffff;
    border-radius:50%;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    border:2px solid #e2e8f0;
    transition:all 0.3s ease;
    font-size:16px;
    color:#475569;
    z-index:10;
}

.toggle-btn:hover {
    background:#f1f5f9;
    transform:translateY(-50%) scale(1.1);
}

.sidebar.shrink .toggle-btn {
    transform:translateY(-50%) rotate(180deg);
}

/* DARK MODE */
body.dark{
    background:linear-gradient(135deg,#0a0f1e,#020617);
}

body.dark .sidebar{
    background:#1e293b;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

body.dark .theme-toggle{
    background:#334155;
}

body.dark .theme-toggle button{
    color:#94a3b8;
}

body.dark .theme-toggle button.active{
    background:#0f172a;
    color:#ffffff;
}

body.dark .menu li{
    color:#cbd5e1;
}

body.dark .menu li:hover{
    background:#334155;
}

body.dark .menu li.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

body.dark .profile{
    background:#334155;
    border-color:#475569;
}

body.dark .profile span{
    color:#f1f5f9;
}

body.dark .profile-role{
    color:#94a3b8;
}

body.dark .toggle-btn{
    background:#334155;
    border-color:#475569;
    color:#f1f5f9;
}

body.dark .toggle-btn:hover{
    background:#475569;
}
</style>
</head>
<body>

<div class="sidebar" id="sidebar">
    <div>
        <div class="theme-toggle">
            <button id="lightBtn" class="active">
                <i class="fas fa-sun"></i> Light
            </button>
            <button id="darkBtn">
                <i class="fas fa-moon"></i> Dark
            </button>
        </div>

<ul class="menu">
            <li class="active">
                <i class="fas fa-home"></i>
                <span>Dashboard</span>
            </li>
            <li>
                <i class="fas fa-inbox"></i>
                <span>Inbox</span>
            </li>
            <li>
                <i class="fas fa-calendar"></i>
                <span>Calendar</span>
            </li>
            <li>
                <i class="fas fa-chart-line"></i>
                <span>Activity</span>
            </li>
            <li>
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </li>
            <li>
                <i class="fas fa-bell"></i>
                <span>Notifications</span>
            </li>
        </ul>
    </div>

<div class="profile">
        <img src="https://i.pravatar.cc/100?u=okbitsnok" alt="Profile">
        <div class="profile-info">
            <span>KEVAKIBHACK</span>
            <span class="profile-role">Admin</span>
        </div>
    </div>

// Theme toggle
lightBtn.onclick = () => {
    body.classList.remove("dark");
    lightBtn.classList.add("active");
    darkBtn.classList.remove("active");
    localStorage.setItem('theme', 'light');
}

darkBtn.onclick = () => {
    body.classList.add("dark");
    darkBtn.classList.add("active");
    lightBtn.classList.remove("active");
    localStorage.setItem('theme', 'dark');
}

// Sidebar toggle
function toggleSidebar(){
    sidebar.classList.toggle("shrink");
    
    // Toggle icon direction
    const icon = toggleBtn.querySelector('i');
    if (sidebar.classList.contains('shrink')) {
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    } else {
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-left');
    }
    
    localStorage.setItem('sidebarState', sidebar.classList.contains('shrink') ? 'shrink' : 'expanded');
}

// Menu item click
menuItems.forEach(item => {
    item.addEventListener('click', function() {
        menuItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        console.log('Selected:', this.querySelector('span').textContent);
    });
});

// Load saved preferences
window.addEventListener('load', function() {
    // Load theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark');
        darkBtn.classList.add('active');
        lightBtn.classList.remove('active');
    }
    
    // Load sidebar state
    const savedState = localStorage.getItem('sidebarState');
    if (savedState === 'shrink') {
        sidebar.classList.add('shrink');
        const icon = toggleBtn.querySelector('i');
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    }
});

// Keyboard shortcut (Ctrl + B to toggle sidebar)
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'b') {
        e.preventDefault();
        toggleSidebar();
    }
});

// Responsive design
function checkScreenSize() {
    if (window.innerWidth <= 768) {
        sidebar.classList.add('shrink');
        const icon = toggleBtn.querySelector('i');
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    }
}

window.addEventListener('resize', checkScreenSize);
checkScreenSize();
</script>

</body>
</html>

INTERACCIÓN DE LA BARRA LATERAL

Recomendado

Un código de Mete

Código HTML del interruptor de palanca CSS

Un código de securecode394

HTML

CSS

JS

Recomendado

Un código de Mete

Código HTML del interruptor de palanca CSS

Un código de securecode394

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS