Konumunu sabitleştiren menü (CSS/JS)

Muhammet Sevim — Tue, 07 Oct 2008 11:58:18 +0000

Bu tasarımdaki ana menüye dikkat ederseniz, siz sayfayı aşağıya doğru ilerletince menünün de sayfayla beraber aşağıya doğru ilerlediğini göreceksiniz. Fakat ne vakit menü sayfanın en üstüne ulaşırsa, o vakit hareket etmeyi kesiyor ve olduğu yere, yani sayfanın en üstüne sabitleniyor. Deneyin ve görün. Siz sayfayı aşağıya doğru ilerletmeye devam etseniz de navigasyon hep sayfanın en üstünde sabit olarak konumlandığından dolayı sayfanın neresinde olursanız olun menü hep gözünüzün önünde oluyor. Fena değil, değil mi?

Aslında bu sistemi K2 teması kullanıyor. Ben de kodu oradan çıkarıp ihtiyaçlarıma göre düzenledim. Gelin size nasıl yapıldığını anlatayım.

Çalışma şekli şu: Birkaç satırlık bir javascript kodu JQuery yardımıyla içeriğinizi barındıran div (burada #container diye adlandıralım) sayfanın en üst noktasına ulaştığında body’ye “smartposition” sınıfını ekliyor. Eğer #container tekrar gözle görünür hale gelirse “smartposition” sınıfı body’den çıkarılıyor. Siz de CSS üzerinden menünüze “smartposition” sınıfı eklendiğinde “position: fixed” komutunu atıyorsunuz. Herşey bundan ibaret.

1. JQuery’i indirin ve sayfanızdan çağırın

JQuery’i sitesi üzerinden indirin, web sitenizin bulunduğu klasöre atın ve sayfanızdan çağırın. Bunun dışında az sonra oluşturacağımız “rollingdiv.js” dosyasını da şimdiden çağırın:

<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/rollingdiv.js" type="text/javascript"></script>

2. Rollingdiv.js

Herşey burada bitiyor. Yukarıda çağırmış olduğumuz rollingdiv.js isimli dosyayı ilgili klasörde oluşturun ve aşağıdaki kodu belgeye yapıştırın:

function smartPosition(obj) {
	if ( jQuery.browser.msie &amp;& parseInt(jQuery.browser.version, 10) &lt; 7 ) {
		return;
	}
 
	jQuery(window).scroll(function() {
		// Detect if content is being scroll offscreen.
		if ( (document.documentElement.scrollTop || document.body.scrollTop) &gt;= jQuery(obj).offset().top) {
			jQuery('body').addClass('smartposition');
		} else {
			jQuery('body').removeClass('smartposition');
		}
	});
};

(Not: Kod K2 temasından alınmıştır.)

3. HTML belgesi

Şimdi de HTML belgemize aşağıdaki kodu yapıştırıyoruz:

<script type="text/javascript"></script>

Buradaki “#container” elementi yukarıya ulaştığında harekete geçilecek olan element oluyor. Bu adımla birlikte HTML ve JS bölümünü bitirmiş oluyoruz. Yani #container divimiz sayfanın tepesine ulaştığında sayfanın body’sine “smartposition” sınıfı eklenecek, son görüntü şu halde olacak;

CSS belgesi

Yapmamız gereken son şey CSS belgemizden “smartposition” sınıflı body’ye özel komutlar atamak. Bu adımda tamamen özgürsünüz; sayfanızın arkaplanının kırmızı olmasını da isteyebilirsiniz, navigasyonunuzun havada asılı kalmasını da. Bu örnekte isteğimiz ikinci şık olduğundan, CSS’imize aşağıdaki kodu eklememiz gerekiyor;

body.smartposition #navigation {
	position: fixed;
	z-index: 10;
}

Bitti bile! “position:fixed;” özelliği #navigation isimli alanın (div) veya listenin (ul, ol) havada asılı kalmasını sağlıyor. Tabii sadece “smartposition” sınıfı body’ye ekli olduğunda. Yani içerik alanımız (div#container) sayfanın tepesine ulaştığında…

Yukarıdaki kodu isteğinize göre değiştirebilirsiniz. Bunun temel mantığı anlatmaya yeteceğini düşünüyorum. Sorularınız, ek istekleriniz olursa yorum yazarak bana ulaşabilirsiniz.

Güncelleme – 07.10.08, 18:45