1/3 İsminiz

 

2/3 E-Mail

 

3/3 Mesajınız

 

Mesajınız Gönderiliyor...
 

Aktif Sayfayı Menüde Gösterme

Web-Tasarım   21.12.17    589

Aktif Sayfayı Menüde Gösterme

Aktif sayfayı menüde göstermek, küçük bir detay gibi gözükse de websitelerimizin görselliğini artıran bir uygulamadır. Tasarımı oldukça kolay olan bu uygulama sadece bir kaç satır CSS kodu ile oluşturulabilir. Bu uygulamanın temel amacı, sayfalarımızda uzun zaman geçiren kullanıcılara hangi sayfada olduklarını hatırlatmaktır.

 

Konu ile ilgili örnek tasarıma buradan ulaşıp, inceleyebilir ve buradan bilgisayarınıza indirebilirsiniz.

 

Aşamalar

 

İlk aşama, her sayfanın HTML yapılasındaki "body" elemanına kimlikler vermektir. Beş sayfadan oluşan bir websitemizin olduğunu düşünürsek, her sayfa için "body" elamanına "sayfa1", "sayfa2" şeklinde kimlikler tanımlayalım.

 
<body id="sayfa1">
 
<body id="sayfa2">
 

Menüdeki link elemanlarına da kimlikler vermemiz gerekiyor. Bu elemanlarımıza da "link1", "link2" şeklinde kimlikler verelim.

 
<div id="menu">
    <ul>
        <li><a href="index.html"  id="link1">Sayfa 1</a></li> 
        <li><a href="sayfa2.html" id="link2">Sayfa 2</a></li> 
        <li><a href="sayfa3.html" id="link3">Sayfa 3</a></li> 
        <li><a href="sayfa4.html" id="link4">Sayfa 4</a></li> 
        <li><a href="sayfa5.html" id="link5">Sayfa 5</a></li> 
    </ul>
</div>
 

Son aşamamızda, aktif olan sayfaya ait menü elemanının görünüşünü CSS ile değiştirelim.

 
#sayfa1 a#link1,  #sayfa2 a#link2, #sayfa3 a#link3,
#sayfa4 a#link4,#sayfa5 a#link5{
	background: #666;
	color:#fff;
}
 

CSS yapısını bir örnek vererek açıklarsak : Örneğin kullanıcı ikinci sayfaya giriş yaparsa, CSS komutları sadece link2 menü elemanı için çalışır. Çünkü 2. sayfanın HTML kısmında sadece #sayfa2 kimliği bulunmaktadır. Bu yüzden 2.sayfada olmayan #sayfa1, #sayfa3, #sayfa4, #sayfa5 kimliklerinin alt elemanları olan diğer menü elemanları için herhangi bir CSS işlemi yapılmaz. Bu sayede hangi sayfadaysak, o sayfa ile ilişkilendirilen menü elemanının görünümü değiştirilir ve aktif sayfa menüde gösterilir. Ayrıca, istersek kullanıcının bulunduğu sayfaya ait olan menü elemanına tıklamasını da "pointer-events" CSS komutu ile engelleyebiliriz.

 
#sayfa1 a#link1,  #sayfa2 a#link2, #sayfa3 a#link3,
#sayfa4 a#link4,#sayfa5 a#link5{
	background: #666;
	color:#fff;
        pointer-events: none; 
}

 

Bu Konular da İlginizi Çekebilir...

 

 

Yorum Yaz

 

Onay Bekleyen Yorum : 0

Yorumlar