Sihirli Fasulyeler
Yükleniyor...
Aktif Sayfayı Menüde Gösterme
 Web-Tasarım   2790   21.12.17   21.12.17   0
aktifsayfamenu.jpg

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; 
}

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
%75
%25

 

 Bu konuyu paylaş

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap