JavaScript ile Header ve Footer Gizleme
Merhaba, Fatih Soysal burada. Bu yazıda, JavaScript kullanarak web sitenizin header (başlık) ve footer (altbilgi) kısımlarını nasıl gizleyebileceğinizi adım adım açıklayacağım. Bu işlem, çeşitli durumlarda oldukça kullanışlı olabilir; örneğin, mobil cihazlarda daha temiz bir görünüm sağlamak veya özel bir giriş ekranı oluşturmak için.
Yöntem 1: CSS ile Gizleme
En basit yöntem, JavaScript kullanarak header ve footer’ların CSS sınıflarını değiştirmektir. Bu sayede, görünürlüklerini kontrol edebiliriz. Öncelikle, header ve footer’larınıza benzersiz sınıflar atamanız gerekir. Örneğin:
<header class="site-header">
<!-- Başlık içeriği -->
</header>
<footer class="site-footer">
<!-- Altbilgi içeriği -->
</footer>
Sonrasında, JavaScript ile bu sınıfların display özelliğini “none” olarak değiştirerek header ve footer’ları gizleyebilirsiniz. İşte bunun için kullanabileceğiniz kod:
function gizle() {
document.querySelector(".site-header").style.display = "none";
document.querySelector(".site-footer").style.display = "none";
}
gizle(); // Sayfa yüklenirken gizlemek için
Bu kod, .site-header ve .site-footer sınıflarına sahip elementleri bulur ve bunların görünürlüklerini gizler. gizle() fonksiyonunu sayfa yüklenirken çalıştırmak için, bu kodu