CSS ile kayan bir sidebar (yan menü) oluşturmak oldukça basittir. Aşağıda, HTML ve CSS kullanarak bir örnek kod paylaşıyorum. Bu örnek, sayfa kaydırıldığında sabit kalan bir sidebar içerir.
Kodu kopyala
Kodu kopyala
HTML ve CSS Kodu
HTML (index.html)
htmlKodu kopyala
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kayan Sidebar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<h2>Menü</h2>
<ul>
<li><a href="#section1">Bölüm 1</a></li>
<li><a href="#section2">Bölüm 2</a></li>
<li><a href="#section3">Bölüm 3</a></li>
</ul>
</div>
<div class="content">
<h1>Sayfa İçeriği</h1>
<p id="section1">Bu, birinci bölümün içeriğidir.</p>
<p id="section2">Bu, ikinci bölümün içeriğidir.</p>
<p id="section3">Bu, üçüncü bölümün içeriğidir.</p>
</div>
</body>
</html>CSS (styles.css)
cssKodu kopyala
CSS:
/* Genel stiller */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Sidebar stili */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #333;
color: white;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}
.sidebar h2 {
margin-top: 0;
text-align: center;
color: #fff;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin: 15px 0;
}
.sidebar ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
.sidebar ul li a:hover {
background-color: #575757;
}
/* İçerik stili */
.content {
margin-left: 270px;
padding: 20px;
}
.content h1 {
margin-top: 0;
}Çalışma Prensibi
- Sidebar sabitlenmiş (position: fixed) ve her zaman ekranın solunda görünür.
- Content kısmı, margin-left kullanılarak sidebar için boşluk bırakır.
- Menüdeki bağlantılar, sayfa içinde belirtilen ID’lere yönlendirilir (örneğin, #section1).