एचटीएमएल सीएसएस साइडबार उदाहरण रिस्पॉन्सिव लेआउट

357 codex

संपादक में खोलें Video अपना कोड प्रकाशित करें

एचटीएमएल सीएसएस साइडबार उदाहरण रिस्पॉन्सिव लेआउट

अनुशंसित

2 February 2024

सीएसएस सोशल्स कार्ड

3 December 2025

हैडामार्ड मैट्रिक्स सीएसएस ग्रिड डिस्प्ले

1 January 2025

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

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>

एचटीएमएल सीएसएस साइडबार उदाहरण रिस्पॉन्सिव लेआउट

अनुशंसित

सीएसएस सोशल्स कार्ड

हैडामार्ड मैट्रिक्स सीएसएस ग्रिड डिस्प्ले

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

HTML

CSS

JS

अनुशंसित

सीएसएस सोशल्स कार्ड

हैडामार्ड मैट्रिक्स सीएसएस ग्रिड डिस्प्ले

ग्रेडिएंट टेक्स्ट सीएसएस एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS