INTERACTION AVEC LA BARRE LATÉRALE

24 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 August 2023

Code de bouton brillant

20 June 2025

Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

20 October 2023

Astuce de capture de la souris avec JS

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>

Recommandé

Code de bouton brillant

Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

Astuce de capture de la souris avec JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS