Ejemplo de diseño adaptable de barra lateral HTML CSS

808 codex

Abrir en el editor Publica tu código

Ejemplo de diseño adaptable de barra lateral HTML CSS

Recomendado

28 May 2026

Cazadores de carretera de alto nivel

2 January 2025

Un código de cloudcodes

8 November 2024

Envía monedas de TikTok a una página falsa

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>

CSS