Bootstrap’e Sol Menü Eklemek

Vatanay Özbeyli Bootstrap

Bootstrap 3‘ün en hissedilen eksikliklerinden birisi sol menü tasarımının olmaması. Ancak bu yapıyı kütüphaneye katan onlarca ek geliştirme internette dolaşmakta. Bu tasarımların en iyilerinden birisi de David Miller tarafından geliştirilmiş Simple Sidebar isimli çalışma.

Bu makalemizde sizlerle birlikte “Bootstrap’e nasıl sol menü eklenir?” sorusuna cevap arayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Bootstrap’e nasıl sol menü eklenir?

David’in GitHub üzerinden blackrockdigital kullanıcı adıyla yayınladığı Simple Sidebar‘ın çalışma prensibi gayet basit. Birkaç satır CSS kodundan oluşan ek bir JavaScript geliştirmesine ihtiyaç duymuyor.

İlk olarak projemizde bulunan bootstrap.css’in altına simple-slider.css dosyasını eklememiz gerekiyor. 

<link href="css/simple-sidebar.css" rel="stylesheet">
DOSYAYI İNDİR

Şimdi yapmamız gereken şey ise sayfamızı #wrapper id’sine sahip bir elemanın içerisine almak. Sayfa içeriklerimiz ise #page-content-wrapper id’sine sahip bir başka elemanın içerisinde yer alacak. Daha açıklayıcı olmak için bir örnek hazırlayalım :

HTML Kodları

<!-- STATIC LAYOUT ENDS -->
<div id="wrapper">

	<!-- Sidebar -->
	<div id="sidebar-wrapper">
		<ul class="sidebar-nav">
			<li class="sidebar-brand">
				<a href="#">
					Bootstrap Sol Menu
				</a>
			</li>
			<li>
				<a href="#">Link #1</a>
			</li>
			<li>
				<a href="#">Link #2</a>
			</li>
			<li>
				<a href="#">Link #3</a>
			</li>
			<li>
				<a href="#">Link #4</a>
			</li>
			<li>
				<a href="#">Link #5</a>
			</li>
		</ul>
	</div>
	<!-- /#sidebar-wrapper -->

	<!-- Page Content -->
	<div id="page-content-wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<h1>Simple Sidebar</h1>
					<p>Tüm sayfa içeriklerinin <code>#page-content-wrapper</code> içerisinde olmasına dikkat ediniz.</p>
					<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Menü Aç/Kapa</a>
				</div>
			</div>
		</div>
	</div>
	<!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

jQuery Kodları (Opsiyonel)

Eğer sizde üstteki örnekteki Menü Aç/Kapa butonunun fonksiyonel olarak çalışmasını istiyorsanız aşağıdaki jQuery kodlarını kullanabilirsiniz.

$("#menu-toggle").click(function(e) {
	e.preventDefault();
	$("#wrapper").toggleClass("toggled");
});

Bitirmeden Önce

Simple Sidebar‘ı kullanmak sorun yaşamanız halinde aklınıza takılanları aşağıdaki yorumlar alanından bizlere iletebilirsiniz.