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;
}
- Yayın Süresi : 2405 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 217975 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Sonsuz İşlemleri 136 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
SihirliFasulyeler, millileştirilen Linux dağıtımı Pardus'u desteklemektedir.
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.
