Esempio di layout reattivo della barra laterale HTML CSS

17 codex

Apri nell'Editor Video Pubblica il Tuo Codice

Esempio di layout reattivo della barra laterale HTML CSS

Consigliato

30 March 2025

Effetto di confusione del testo

25 November 2025

Via di fuga

1 December 2025

Pagina dei link dei social media - Khalil Latreche

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sidebar</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: flex;
        }

/* Sidebar Styling */
        .sidebar {
            height: 100vh;
            width: 250px;
            background-color: #2c3e50;
            color: white;
            position: fixed;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
        }

.sidebar-header {
            padding: 20px;
            text-align: center;
            background-color: #1a252f;
            font-size: 1.5rem;
            font-weight: bold;
        }

.sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.sidebar-menu li {
            border-bottom: 1px solid #34495e;
        }

.sidebar-menu li a {
            display: block;
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none;
            transition: background 0.3s;
        }

.sidebar-menu li a:hover {
            background-color: #34495e;
            padding-left: 35px;
        }

.sidebar-menu li a.active {
            background-color: #3498db;
            border-left: 5px solid #fff;
        }

/* Main Content Styling */
        .main-content {
            margin-left: 250px;
            padding: 40px;
            width: 100%;
        }

@media (max-width: 768px) {
            .sidebar {
                width: 70px;
            }
            .sidebar-header, .link-text {
                display: none;
            }
            .main-content {
                margin-left: 70px;
            }
            .sidebar-menu li a {
                text-align: center;
                padding: 20px 0;
            }
        }
    </style>
</head>
<body>

<aside class="sidebar">
        <div class="sidebar-header">
            MyApp
        </div>
        <ul class="sidebar-menu">
            <li><a href="#" class="active"><span class="link-text">Dashboard</span></a></li>
            <li><a href="#"><span class="link-text">Profile</span></a></li>
            <li><a href="#"><span class="link-text">Messages</span></a></li>
            <li><a href="#"><span class="link-text">Analytics</span></a></li>
            <li><a href="#"><span class="link-text">Settings</span></a></li>
            <li><a href="#"><span class="link-text">Logout</span></a></li>
        </ul>
    </aside>

<main class="main-content">
        <h1>Welcome to the Dashboard</h1>
        <p>This is a standard layout featuring a fixed-position sidebar and a flexible main content area.</p>
        <p>On smaller screens, the sidebar collapses or adjusts to save space.</p>
    </main>

</body>
</html>

Consigliato

Effetto di confusione del testo

Via di fuga

Pagina dei link dei social media - Khalil Latreche

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS