Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Modern Sidebar Örnekleri</title>

<style>

/* ===== GENEL AYARLAR ===== */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Inter', sans-serif;

}

body {

min-height: 100vh;

background: #f4f6f8;

color: #333;

}

.container {

max-width: 1400px;

margin: 0 auto;

padding: 20px;

}

h1 {

text-align: center;

color: #0f172a;

margin-bottom: 10px;

font-size: 2.5rem;

}

.subtitle {

text-align: center;

color: #64748b;

margin-bottom: 40px;

font-size: 1.1rem;

}

.sidebar-types {

display: flex;

flex-wrap: wrap;

gap: 30px;

margin-top: 30px;

}

.sidebar-box {

flex: 1;

min-width: 300px;

background: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

}

.box-header {

background: #0f172a;

color: white;

padding: 18px 20px;

font-weight: 600;

font-size: 1.2rem;

}

.box-content {

padding: 20px;

}

.demo-area {

display: flex;

height: 500px;

border-radius: 10px;

overflow: hidden;

border: 1px solid #e2e8f0;

position: relative;

}

/* ===== AÇILIP KAPANAN SIDEBAR ===== */

.toggle-sidebar {

width: 80px;

background: linear-gradient(180deg, #1e293b, #0f172a);

color: #fff;

display: flex;

flex-direction: column;

padding: 20px 0;

transition: width 0.3s ease;

overflow: hidden;

position: relative;

}

.toggle-sidebar.expanded {

width: 260px;

}

/* Logo Alanı */

.sidebar-logo {

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 30px;

padding: 0 15px;

min-height: 40px;

}

.logo-text {

white-space: nowrap;

font-size: 22px;

font-weight: 700;

letter-spacing: 1px;

opacity: 0;

transition: opacity 0.2s;

}

.toggle-sidebar.expanded .logo-text {

opacity: 1;

}

.toggle-btn {

position: absolute;

right: -12px;

top: 20px;

width: 24px;

height: 24px;

background: #38bdf8;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

z-index: 10;

box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

.toggle-btn i {

font-size: 12px;

color: white;

transition: transform 0.3s;

}

.toggle-sidebar.expanded .toggle-btn i {

transform: rotate(180deg);

}

/* Profil Alanı */

.toggle-profile {

display: flex;

align-items: center;

gap: 12px;

padding: 12px 15px;

background: rgba(255,255,255,0.08);

border-radius: 10px;

margin: 0 15px 30px;

overflow: hidden;

white-space: nowrap;

}

.toggle-profile img {

width: 45px;

height: 45px;

border-radius: 50%;

object-fit: cover;

border: 2px solid #38bdf8;

flex-shrink: 0;

}

.toggle-profile .info {

line-height: 1.3;

opacity: 0;

transition: opacity 0.2s;

}

.toggle-sidebar.expanded .toggle-profile .info {

opacity: 1;

}

.toggle-profile .info span {

font-size: 12px;

color: #cbd5f5;

}

/* Menü */

.toggle-menu {

list-style: none;

flex: 1;

}

.toggle-menu li {

margin-bottom: 5px;

}

.toggle-menu a {

display: flex;

align-items: center;

gap: 12px;

padding: 12px 15px;

color: #e5e7eb;

text-decoration: none;

border-radius: 8px;

margin: 0 10px;

transition: background 0.3s, color 0.3s;

white-space: nowrap;

}

.toggle-menu a:hover {

background: rgba(56,189,248,0.2);

color: #fff;

}

.toggle-menu a.active {

background: #38bdf8;

color: #0f172a;

font-weight: 600;

}

.toggle-menu span {

opacity: 0;

transition: opacity 0.2s;

}

.toggle-sidebar.expanded .toggle-menu span {

opacity: 1;

}

/* Alt Menü (Çıkış) */

.toggle-footer {

border-top: 1px solid rgba(255,255,255,0.15);

padding: 15px 15px 0;

margin: 0 10px;

}

.toggle-logout {

display: flex;

align-items: center;

gap: 12px;

padding: 12px;

border-radius: 8px;

background: rgba(239,68,68,0.15);

color: #fecaca;

text-decoration: none;

transition: background 0.3s;

white-space: nowrap;

}

.toggle-logout:hover {

background: rgba(239,68,68,0.35);

}

.toggle-logout span {

opacity: 0;

transition: opacity 0.2s;

}

.toggle-sidebar.expanded .toggle-logout span {

opacity: 1;

}

/* ===== ALT MENÜLÜ SIDEBAR ===== */

.dropdown-sidebar {

width: 260px;

background: linear-gradient(180deg, #1a237e, #0d1b2a);

color: #fff;

display: flex;

flex-direction: column;

padding: 20px;

overflow-y: auto;

}

/* Logo Alanı */

.dropdown-sidebar .logo {

font-size: 22px;

font-weight: 700;

text-align: center;

margin-bottom: 30px;

letter-spacing: 1px;

}

/* Profil Alanı */

.dropdown-profile {

display: flex;

align-items: center;

gap: 12px;

padding: 12px;

background: rgba(255,255,255,0.08);

border-radius: 10px;

margin-bottom: 30px;

}

.dropdown-profile img {

width: 45px;

height: 45px;

border-radius: 50%;

object-fit: cover;

border: 2px solid #4fc3f7;

}

.dropdown-profile .info {

line-height: 1.3;

}

.dropdown-profile .info span {

font-size: 12px;

color: #cbd5f5;

}

/* Menü */

.dropdown-menu {

list-style: none;

flex: 1;

}

.dropdown-menu > li {

margin-bottom: 5px;

}

.dropdown-menu a {

display: flex;

align-items: center;

justify-content: space-between;

padding: 12px 14px;

color: #e5e7eb;

text-decoration: none;

border-radius: 8px;

transition: background 0.3s, color 0.3s;

}

.dropdown-menu a:hover {

background: rgba(79,195,247,0.2);

color: #fff;

}

.dropdown-menu a.active {

background: #4fc3f7;

color: #0f172a;

font-weight: 600;

}

.dropdown-menu .has-submenu.active {

background: rgba(79,195,247,0.1);

border-radius: 8px;

}

/* Alt Menü */

.submenu {

list-style: none;

max-height: 0;

overflow: hidden;

transition: max-height 0.3s ease;

background: rgba(255,255,255,0.05);

border-radius: 0 0 8px 8px;

margin-top: -5px;

}

.submenu.expanded {

max-height: 300px;

}

.submenu li {

padding-left: 20px;

}

.submenu a {

padding: 10px 14px;

font-size: 14px;

color: #cbd5e1;

}

.submenu a:hover {

background: rgba(79,195,247,0.1);

}

.submenu a.active {

background: rgba(79,195,247,0.3);

color: #fff;

}

.menu-arrow {

transition: transform 0.3s;

}

.has-submenu.active .menu-arrow {

transform: rotate(180deg);

}

/* Alt Menü (Çıkış) */

.dropdown-footer {

border-top: 1px solid rgba(255,255,255,0.15);

padding-top: 15px;

}

.dropdown-logout {

display: block;

text-align: center;

padding: 12px;

border-radius: 8px;

background: rgba(239,68,68,0.15);

color: #fecaca;

text-decoration: none;

transition: background 0.3s;

}

.dropdown-logout:hover {

background: rgba(239,68,68,0.35);

}

/* ===== ANA İÇERİK ALANI ===== */

.main-content {

flex: 1;

padding: 30px;

overflow-y: auto;

}

.main-content h2 {

margin-bottom: 15px;

color: #0f172a;

}

.main-content p {

color: #475569;

line-height: 1.6;

}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {

.sidebar-types {

flex-direction: column;

}

.demo-area {

height: 400px;

}

.toggle-sidebar {

width: 60px;

}

.toggle-sidebar.expanded {

width: 200px;

}

</style>

</head>

<body>

<h1>Modern Sidebar Örnekleri</h1>

<p class="subtitle">Açılıp kapanabilen ve alt menülü iki farklı modern sidebar tasarımı</p>

<div class="box-header">Açılıp Kapanan Sidebar</div>

</div>

<span class="logo-text">MyPanel</span>

</div>

<strong>KEVAKİBHACK</strong><br>

<span>Admin</span>

</div>

<span>Ana Sayfa</span>

</a></li>

<span>Dashboard</span>

</a></li>

<span>Kullanıcılar</span>

</a></li>

<span>Dosyalar</span>

</a></li>

<span>Ayarlar</span>

</a></li>

<span>Bildirimler</span>

</a></li>

</ul>

<span>Çıkış Yap</span>

</a>

</div>

</aside>

<h2>Açılıp Kapanan Sidebar</h2>

<p>Bu sidebar tasarımı, daraltıldığında sadece ikonları gösterir. Genişletildiğinde ise menü metinlerini ve profil bilgilerini görüntüler.</p>

<p style="margin-top: 15px;"><strong>Kullanımı:</strong> Sağ üst köşedeki mavi butona tıklayarak sidebar'ı daraltabilir veya genişletebilirsiniz.</p>

<p style="margin-top: 10px;">Bu tasarım, dar ekranlı cihazlarda veya kullanıcı daha geniş içerik alanı istediğinde idealdir.</p>

</main>

</div>

<div class="box-header">Alt Menülü Sidebar</div>

<div class="logo">MyPanel</div>

<strong>Ayşe Demir</strong><br>

<span>Editör</span>

</div>

<span><i class="fas fa-home" style="margin-right: 10px;"></i>Ana Sayfa</span>

</a></li>

<span><i class="fas fa-chart-bar" style="margin-right: 10px;"></i>Dashboard</span>

</a>

<li><a href="#">Genel Bakış</a></li>

<li><a href="#" class="active">Satışlar</a></li>

<li><a href="#">Trafik</a></li>

<li><a href="#">Raporlar</a></li>

</ul>

</li>

<span><i class="fas fa-users" style="margin-right: 10px;"></i>Kullanıcılar</span>

</a>

<li><a href="#">Tüm Kullanıcılar</a></li>

<li><a href="#">Roller</a></li>

<li><a href="#">İzinler</a></li>

</ul>

</li>

<span><i class="fas fa-folder" style="margin-right: 10px;"></i>Dosyalar</span>

</a></li>

<span><i class="fas fa-cog" style="margin-right: 10px;"></i>Ayarlar</span>

</a>

<li><a href="#">Genel Ayarlar</a></li>

<li><a href="#">Güvenlik</a></li>

<li><a href="#">Bildirimler</a></li>

<li><a href="#">Gelişmiş</a></li>

</ul>

</li>

</ul>

<a href="#" class="dropdown-logout">Çıkış Yap</a>

</div>

</aside>

<h2>Alt Menülü Sidebar</h2>

<p>Bu sidebar tasarımı, alt menüler içerir. Ana menü öğelerine tıklayarak alt menüleri açıp kapatabilirsiniz.</p>

<p style="margin-top: 15px;"><strong>Kullanımı:</strong> Dashboard, Kullanıcılar ve Ayarlar menülerinin yanındaki oklara tıklayarak alt menüleri açabilirsiniz.</p>

<p style="margin-top: 10px;">Bu tasarım, çok sayıda menü öğesi olduğunda kullanıcı deneyimini iyileştirir ve düzenli bir görünüm sağlar.</p>

</main>

</div>

// Açılıp kapanan sidebar için JavaScript

document.getElementById('toggleButton').addEventListener('click', function() {

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

sidebar.classList.toggle('expanded');

});

// Alt menüler için JavaScript

document.querySelectorAll('.has-submenu').forEach(menu => {

menu.addEventListener('click', function(e) {

// Ana menü linkine tıklandığında

if (e.target.tagName === 'A' || e.target.parentElement.tagName === 'A') {

e.preventDefault();

// Tıklanan menüyü aç/kapa

const submenu = this.querySelector('.submenu');

const isActive = this.classList.contains('active');

// Diğer tüm alt menüleri kapat

document.querySelectorAll('.has-submenu').forEach(item => {

if (item !== this) {

item.classList.remove('active');

item.querySelector('.submenu').classList.remove('expanded');

}

});

// Tıklanan menüyü aç/kapa

if (!isActive) {

this.classList.add('active');

submenu.classList.add('expanded');

} else {

this.classList.remove('active');

submenu.classList.remove('expanded');

}

});

// Örnek: Sayfa yüklendiğinde bir alt menüyü açık göster

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

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

dashboardMenu.classList.add('active');

document.getElementById('dashboardSubmenu').classList.add('expanded');

});

</script>

</body>

</html>

Side bar

Recommended

HTML CSS Modern Navbar

Premium Responsive Navbar

CodePen Home Premium Responsive Navbar

HTML

CSS

JS

Recommended

HTML CSS Modern Navbar

Premium Responsive Navbar

CodePen Home Premium Responsive Navbar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS