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>

CSS

JS

Side bar

Recommended