Bootstrap Offcanvas, sayfanın kenarından açılan ve kullanıcıların ek bilgi veya içeriklere hızlı erişimini sağlayan bir bileşendir. Kullanıcı etkileşimini artırmak için kullanılır ve özellikle mobil cihazlarda duyarlı bir şekilde çalışır. Offcanvas, genellikle menüler, ek bilgi alanları veya bildirimler için kullanılır.
Bootstrap Offcanvas Özellikleri
- Duyarlı Tasarım: Offcanvas bileşeni, masaüstü ve mobil cihazlarda uyumlu bir şekilde çalışır.
- Kullanıcı Deneyimi: Sayfa içeriğiyle etkileşimi bozmadan ek içerik sunar.
- Farklı Konumlar: Offcanvas bileşeni, sağ, sol, üst veya alt kısımdan açılabilir.
- Kolay Kapatma: Kullanıcı, bileşeni kolayca kapatabilir, genellikle bir "kapat" düğmesi veya sayfanın dışına tıklama ile.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak bir Offcanvas menü örneği verilmiştir. Bu örnekte, bir yan menü oluşturulmuştur.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Offcanvas Örneği</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Menü Aç
</button>
</div>
</nav>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Menü Başlığı</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Kapat">
</button>
</div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Anasayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkında</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hizmetler</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
Navbar Yapısı:
-
<nav class="navbar navbar-expand-lg navbar-light bg-light">: Navbar bileşeninin başlangıcıdır. -
<button class="btn btn-primary" data-bs-toggle="offcanvas">: Offcanvas menüsünü açmak için kullanılan buton.data-bs-targetözelliği, hangi offcanvas bileşeninin açılacağını belirtir.
-
-
Offcanvas Yapısı:
-
<div class="offcanvas offcanvas-start">: Offcanvas bileşeninin başlangıcıdır.offcanvas-startsınıfı, offcanvas'ın sol taraftan açılmasını sağlar. Diğer konumlar içinoffcanvas-end,offcanvas-top, veyaoffcanvas-bottomsınıfları kullanılabilir. -
<div class="offcanvas-header">: Offcanvas başlığını ve kapatma butonunu içeren bölüm. -
<h5 class="offcanvas-title">: Offcanvas başlığını tanımlar. -
<button class="btn-close text-reset" data-bs-dismiss="offcanvas">: Offcanvas'ı kapatmak için kullanılan buton.data-bs-dismissözelliği, offcanvas'ı kapatır. -
<div class="offcanvas-body">: Offcanvas içeriğini kapsayan bölüm. Burada genellikle bağlantılar veya içerik yer alır.
-
Önemli Notlar
- Offcanvas, kullanıcıların ana içeriği terk etmeden ek bilgi almasına olanak tanır.
- JavaScript bileşenleri, offcanvas'ın açılması ve kapanması için gereklidir.
- Offcanvas bileşeni, sitenizin kullanılabilirliğini artırmak ve kullanıcı deneyimini geliştirmek için etkili bir yöntemdir.
Bootstrap Offcanvas, özellikle mobil cihazlarda ve duyarlı tasarım gereksinimlerinde kullanıcı deneyimini geliştirmek için harika bir bileşendir. Kullanıcılar, içeriklere hızlıca erişim sağlayarak daha akıcı bir deneyim yaşarlar.