HTML-Admin-Dashboard-Vorlage mit Seitenleiste

409 righitakieddine

Im Editor öffnen Veröffentlichen Sie Ihren Code

HTML-Admin-Dashboard-Vorlage mit Seitenleiste

Empfohlen

9 July 2025

Responsive Iframe mit Gerätevorschau-Navigation

1 November 2024

HTML-Portfolio-Website mit Seitenmenü

16 November 2024

So erstellen Sie eine Raster-Seitenleiste in CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
</head>
<body>
    <header class="header">
        <div class="logo">Your Logo</div>
        <div class="user-info">Welcome, Admin!</div>
    </header>
    <div class="container">
        <aside class="sidebar">
            <ul>
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Orders</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </aside>
        <main class="main-content">
            <h1>Dashboard Overview</h1>
            <div class="card-grid">
                <div class="card">
                    <h3>Total Users</h3>
                    <p>1</p>
                </div>
                <div class="card">
                    <h3>Total Products</h3>
                    <p>2</p>
                </div>
                <div class="card">
                    <h3>New Orders</h3>
                    <p>3</p>
                </div>
                <div class="card">
                    <h3>Revenue</h3>
                    <p>4</p>
                </div>
            </div>
            <h2>Recent Activity</h2>
            <div class="card activity">
                <ul>
                    <li><strong>CyberTech</strong> registered a new account. <span style="float: right; color: #777;">2 min ago</span></li>
                    <li>Product <strong>'Wireless Earbuds'</strong> updated. <span style="float: right; color: #777;">15 min ago</span></li>
                    <li>New order <strong>#1001</strong> placed by Jane Smith. <span style="float: right; color: #777;">1 hour ago</span></li>
                    <li>Login from IP <strong>192.168.1.10</strong>. <span style="float: right; color: #777;">3 hours ago</span></li>
                    <li><strong>Admin</strong> updated site settings. <span style="float: right; color: #777;">Yesterday</span></li>
                </ul>
            </div>
        </main>
    </div>
    <footer class="footer">
        © 2025 Admin Dashboard. All rights reserved.
    </footer>
</body>
</html>

CSS

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f6;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Ensures full viewport height */
        }

/* Header Styles */
        .header {
            background-color: #2c3e50; /* Dark blue */
            color: white;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .header .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .header .user-info {
            font-size: 16px;
            opacity: 0.9;
        }

/* Main Container for Sidebar and Content */
        .container {
            display: flex;
            flex: 1; /* Allows the container to fill remaining vertical space */
        }

/* Sidebar Styles */
        .sidebar {
            width: 240px;
            background-color: #34495e; /* Slightly lighter blue than header */
            color: white;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            overflow-y: auto; /* Enable scrolling for long menus */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li a {
            display: block;
            padding: 15px 25px;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s ease, padding-left 0.3s ease;
            border-left: 5px solid transparent; /* For active indicator */
        }
        .sidebar ul li a:hover {
            background-color: #4a6480; /* Lighter on hover */
            padding-left: 30px;
        }
        .sidebar ul li.active a {
            background-color: #007bff; /* Primary blue for active */
            border-left-color: #007bff;
            font-weight: bold;
        }

/* Main Content Area Styles */
        .main-content {
            flex: 1; /* Allows main content to take up remaining width */
            padding: 25px;
            background-color: #fcfcfc;
            overflow-y: auto; /* Enable scrolling if content overflows */
        }
        .main-content h1 {
            color: #333;
            margin-top: 0;
            margin-bottom: 25px;
            font-size: 28px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

/* Card Grid Layout */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        .card {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.12);
        }
        .card h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
            font-size: 20px;
        }
        .card p {
            font-size: 28px;
            font-weight: bold;
            color: #007bff; /* Primary blue for key figures */
            margin: 0;
        }
        .card.activity ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 15px;
        }
        .card.activity ul li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            color: #555;
        }
        .card.activity ul li:last-child {
            border-bottom: none;
        }

/* Footer Styles */
        .footer {
            background-color: #e9ecef; /* Light gray */
            color: #6c757d; /* Darker gray text */
            text-align: center;
            padding: 20px 25px;
            border-top: 1px solid #dee2e6;
            font-size: 14px;
        }

/* Responsive Adjustments (Basic) */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .sidebar {
                width: 100%;
                padding-top: 0;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            .sidebar ul {
                display: flex; /* Make sidebar items horizontal on small screens */
                flex-wrap: wrap;
                justify-content: center;
                padding-bottom: 10px;
            }
            .sidebar ul li {
                flex: 1 1 auto; /* Allow items to grow/shrink */
                text-align: center;
            }
            .sidebar ul li a {
                padding: 10px 15px;
                border-left: none;
                border-bottom: 3px solid transparent;
            }
            .sidebar ul li a:hover {
                padding-left: 15px; /* Reset padding for hover */
            }
            .sidebar ul li.active a {
                border-left-color: transparent;
                border-bottom-color: #007bff;
            }
            .main-content {
                padding: 20px;
            }
            .card-grid {
                grid-template-columns: 1fr; /* Single column on small screens */
            }
        }

JS

Empfohlen

Responsive Iframe mit Gerätevorschau-Navigation

HTML-Portfolio-Website mit Seitenmenü

So erstellen Sie eine Raster-Seitenleiste in CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS