Webleb - UI Elements

HTML

CSS

<!DOCTYPE html>

<head>

<title>CSS Sidebar</title>

<style>

/* Reset and base styles */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}

body {

display: flex;

background-color: #f9fafb;

color: #111827;

}

/* Sidebar styles */

.sidebar {

width: 280px;

height: 100vh;

background-color: white;

border-right: 1px solid #e5e7eb;

padding: 24px;

position: fixed;

overflow-y: auto;

}

.logo {

display: flex;

align-items: center;

gap: 12px;

margin-bottom: 32px;

padding: 0 8px;

}

.logo-img {

width: 32px;

height: 32px;

background-color: #3b82f6;

border-radius: 8px;

}

.logo span {

font-size: 18px;

font-weight: 600;

}

.nav-list {

list-style: none;

display: flex;

flex-direction: column;

gap: 4px;

}

.nav-list li {

padding: 10px 12px;

border-radius: 6px;

display: flex;

align-items: center;

gap: 12px;

font-size: 15px;

font-weight: 500;

color: #4b5563;

cursor: pointer;

transition: all 0.2s ease;

position: relative;

}

.nav-list li:hover {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li i {

width: 20px;

text-align: center;

color: #9ca3af;

}

.nav-list li:hover i {

color: #6b7280;

}

.badge {

background-color: #e5e7eb;

color: #4b5563;

font-size: 12px;

font-weight: 500;

padding: 2px 8px;

border-radius: 999px;

margin-left: auto;

}

/* Active state */

.nav-list li.active {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li.active i {

color: #111827;

}

/* Main content styles */

.content {

flex: 1;

margin-left: 280px;

padding: 40px;

min-height: 100vh;

}

.content h1 {

font-size: 32px;

margin-bottom: 24px;

}

/* Mobile menu button */

.mobile-menu-button {

display: none;

position: fixed;

top: 20px;

left: 20px;

z-index: 101;

background: white;

border: none;

padding: 10px;

border-radius: 6px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

cursor: pointer;

}

/* Responsive adjustments */

@media (max-width: 768px) {

.sidebar {

width: 240px;

padding: 16px;

}

.content {

margin-left: 240px;

padding: 24px;

}

@media (max-width: 576px) {

.sidebar {

transform: translateX(-100%);

transition: transform 0.3s ease;

z-index: 100;

}

.sidebar.open {

transform: translateX(0);

}

.content {

margin-left: 0;

padding: 24px;

padding-top: 70px;

}

.mobile-menu-button {

display: block;

}

</style>

</head>

<body>

</button>

<span>Untitled UI</span>

</div>

<li class="active"><i class="fas fa-home"></i> Dashboard</li>

<li><i class="fas fa-box"></i> Products</li>

<li><i class="fas fa-users"></i> Customers</li>

<li><i class="fas fa-envelope"></i> Messages</li>

<li>

<i class="fas fa-pen"></i> Drafts

</li>

<li>

<i class="fas fa-calendar-check"></i> Scheduled

</li>

<li>

<i class="fas fa-check-circle"></i> Published

</li>

<li><i class="fas fa-image"></i> Images</li>

<li><i class="fas fa-network-wired"></i> Network</li>

<li><i class="fas fa-warehouse"></i> Inventory</li>

<li><i class="fas fa-hashtag"></i> Hashtags</li>

<li><i class="fas fa-gift"></i> Rewards</li>

</ul>

</div>

<h1>Main Content</h1>

<p>Welcome to your dashboard. This is the main content area that will display different content based on your navigation selections.</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

const menuButton = document.getElementById('menuButton');

const sidebar = document.getElementById('sidebar');

const navItems = document.querySelectorAll('.nav-list li');

// Mobile menu toggle

menuButton.addEventListener('click', function() {

sidebar.classList.toggle('open');

});

// Navigation item click handler

navItems.forEach(item => {

item.addEventListener('click', function() {

// Remove active class from all items

navItems.forEach(navItem => navItem.classList.remove('active'));

// Add active class to clicked item

this.classList.add('active');

// Close sidebar on mobile after selection

if (window.innerWidth <= 576) {

sidebar.classList.remove('open');

}

// Update content based on selection

const pageTitle = this.textContent.trim();

document.querySelector('.content h1').textContent = pageTitle;

document.querySelector('.content p').textContent = `This is the ${pageTitle} page content.`;

});

// Close sidebar when clicking outside on mobile

document.addEventListener('click', function(event) {

if (window.innerWidth <= 576 &&

!sidebar.contains(event.target) &&

event.target !== menuButton) {

sidebar.classList.remove('open');

}

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>CSS Sidebar</title>

<style>

/* Reset and base styles */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}

body {

display: flex;

background-color: #f9fafb;

color: #111827;

}

/* Sidebar styles */

.sidebar {

width: 280px;

height: 100vh;

background-color: white;

border-right: 1px solid #e5e7eb;

padding: 24px;

position: fixed;

overflow-y: auto;

}

.logo {

display: flex;

align-items: center;

gap: 12px;

margin-bottom: 32px;

padding: 0 8px;

}

.logo-img {

width: 32px;

height: 32px;

background-color: #3b82f6;

border-radius: 8px;

}

.logo span {

font-size: 18px;

font-weight: 600;

}

.nav-list {

list-style: none;

display: flex;

flex-direction: column;

gap: 4px;

}

.nav-list li {

padding: 10px 12px;

border-radius: 6px;

display: flex;

align-items: center;

gap: 12px;

font-size: 15px;

font-weight: 500;

color: #4b5563;

cursor: pointer;

transition: all 0.2s ease;

position: relative;

}

.nav-list li:hover {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li i {

width: 20px;

text-align: center;

color: #9ca3af;

}

.nav-list li:hover i {

color: #6b7280;

}

.badge {

background-color: #e5e7eb;

color: #4b5563;

font-size: 12px;

font-weight: 500;

padding: 2px 8px;

border-radius: 999px;

margin-left: auto;

}

/* Active state */

.nav-list li.active {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li.active i {

color: #111827;

}

/* Main content styles */

.content {

flex: 1;

margin-left: 280px;

padding: 40px;

min-height: 100vh;

}

.content h1 {

font-size: 32px;

margin-bottom: 24px;

}

/* Mobile menu button */

.mobile-menu-button {

display: none;

position: fixed;

top: 20px;

left: 20px;

z-index: 101;

background: white;

border: none;

padding: 10px;

border-radius: 6px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

cursor: pointer;

}

/* Responsive adjustments */

@media (max-width: 768px) {

.sidebar {

width: 240px;

padding: 16px;

}

.content {

margin-left: 240px;

padding: 24px;

}

@media (max-width: 576px) {

.sidebar {

transform: translateX(-100%);

transition: transform 0.3s ease;

z-index: 100;

}

.sidebar.open {

transform: translateX(0);

}

.content {

margin-left: 0;

padding: 24px;

padding-top: 70px;

}

.mobile-menu-button {

display: block;

}

</style>

</head>

<body>

</button>

<span>Untitled UI</span>

</div>

<li class="active"><i class="fas fa-home"></i> Dashboard</li>

<li><i class="fas fa-box"></i> Products</li>

<li><i class="fas fa-users"></i> Customers</li>

<li><i class="fas fa-envelope"></i> Messages</li>

<li>

<i class="fas fa-pen"></i> Drafts

</li>

<li>

<i class="fas fa-calendar-check"></i> Scheduled

</li>

<li>

<i class="fas fa-check-circle"></i> Published

</li>

<li><i class="fas fa-image"></i> Images</li>

<li><i class="fas fa-network-wired"></i> Network</li>

<li><i class="fas fa-warehouse"></i> Inventory</li>

<li><i class="fas fa-hashtag"></i> Hashtags</li>

<li><i class="fas fa-gift"></i> Rewards</li>

</ul>

</div>

<h1>Main Content</h1>

<p>Welcome to your dashboard. This is the main content area that will display different content based on your navigation selections.</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

const menuButton = document.getElementById('menuButton');

const sidebar = document.getElementById('sidebar');

const navItems = document.querySelectorAll('.nav-list li');

// Mobile menu toggle

menuButton.addEventListener('click', function() {

sidebar.classList.toggle('open');

});

// Navigation item click handler

navItems.forEach(item => {

item.addEventListener('click', function() {

// Remove active class from all items

navItems.forEach(navItem => navItem.classList.remove('active'));

// Add active class to clicked item

this.classList.add('active');

// Close sidebar on mobile after selection

if (window.innerWidth <= 576) {

sidebar.classList.remove('open');

}

// Update content based on selection

const pageTitle = this.textContent.trim();

document.querySelector('.content h1').textContent = pageTitle;

document.querySelector('.content p').textContent = `This is the ${pageTitle} page content.`;

});

// Close sidebar when clicking outside on mobile

document.addEventListener('click', function(event) {

if (window.innerWidth <= 576 &&

!sidebar.contains(event.target) &&

event.target !== menuButton) {

sidebar.classList.remove('open');

}

});

</script>

</body>

</html>