Ejemplo de diseño adaptable de barra lateral HTML CSS

19 codex

Abrir en el editor Video Publica tu código

Ejemplo de diseño adaptable de barra lateral HTML CSS

Recomendado

22 November 2024

Descargar tarjeta de aplicación

9 September 2025

Fragmento de animación de carga de CSS

28 August 2025

Ejemplo de código HTML de la página de inicio de sesión en turco

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>

Recomendado

Descargar tarjeta de aplicación

Fragmento de animación de carga de CSS

Ejemplo de código HTML de la página de inicio de sesión en turco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS