Webleb - UI Elements

HTML

<!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>

Side bar

Recommended

Horizontal Menu Bar

Sidebar toggle

HTML CSS Navbar Code

HTML

CSS

JS

Recommended

Horizontal Menu Bar

Sidebar toggle

HTML CSS Navbar Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS