HTML, CSS ve JavaScript ile Mobil Menü Çubuğu Nasıl Yapılır?

Şüphesiz, TailWind veya BootStrap gibi CSS çerçevelerini kullanarak değiştirilebilir bir mobil menü oluşturabilirsiniz.

Ama arkasındaki konsept nedir? Ve bu CSS çerçevelerine bağlı olmadan nasıl sıfırdan bir tane yapabilirsiniz?

Yukarıdakileri kendiniz yapmak size tam özelleştirme kontrolü sağlar. Sözü daha fazla uzatmadan, tercih ettiğiniz programlama dilini kullanarak değiştirilebilir bir mobil menüyü nasıl oluşturacağınız aşağıda açıklanmıştır.

Değiştirilebilir Mobil Menünüzü Nasıl Oluşturursunuz

Henüz yapmadıysanız, proje klasörünüzü açın ve proje dosyalarınızı (HTML, CSS ve JavaScript) oluşturun.

Aşağıda, her üç tür için de ihtiyacınız olan kod örneklerini göreceksiniz. Ve henüz yapmadıysanız, indirmeyi düşünün kod öğrenmek için bu uygulamalar okumadan önce.

ile başlayacağız HTML:

 Üç satırlı açılır menü çubuğunu temsil edecek üç div oluşturun 








 Navigasyonlarınızı buraya ekleyin 


Ev
Hakkında
Temas etmek

CSS:

/*Bu bölüm sınırlaması yalnızca eğitim amaçlıdır*/
Bölüm{ 





instagram viewer


genişlik: 800 piksel;
yükseklik: 600 piksel;
üst kenar boşluğu: 50 piksel;
sol kenar boşluğu: 250 piksel;
kenarlık: düz siyah 1 piksel;
arka plan: #e6e3dc;
}
/*divs kapsayıcısını DOM'nizde konumlandırın*/
#toggle-container{
ekran: ızgara;
genişlik: uygun içerik;
sol kenar boşluğu: 720 piksel;
üst kenar boşluğu: 10 piksel;
}
/*Üç div'i üst üste istifle. Ardından onlar için bir yükseklik ve genişlik belirleyin.*/
#bir, iki, üç{
arka plan: siyah;
genişlik: 30 piksel;
yükseklik: 3 piksel;
üst kenar boşluğu: 5 piksel;
} 
.toggle-içerik{
görüntü yok;
sol kenar boşluğu: 700 piksel;
üst kenar boşluğu: 20 piksel;
}
.toggle-content a{
Ekran bloğu;
metin-dekorasyon: yok;
siyah renk;
yazı tipi boyutu: 30 piksel;
}
.toggle-content a: üzerine gelin{
renk: mavi;
}
/*JavaScript tarafından oluşturulan sınıf örneğini blokta göster*/
.görüntülenen{
Ekran bloğu;
}

JavaScript'i ekleyin:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("tıkla", function(){
//Her gezinmeye bir sınıf örneği uygulayın ve ekranı geçiş yapacak şekilde ayarlayın:
toggleContents.classList.toggle("görüntülenen");
});

Menü çubuğunu tıkladığınızda çalışan bir çıktının nasıl göründüğü aşağıda açıklanmıştır:

Menü değiştirilebilir, bu nedenle çubuğa tekrar tıklamak - veya sayfanın herhangi bir yeri - gezinmeleri gizler.

İlişkili: Web Sitesi Öğelerini CSS Arka Plan Gradyanıyla Stillendirin

Tarayıcınız, web sayfanızın herhangi bir yerine tıkladığınızda içeriğin gizlenmesini desteklemeyebilir. Bir olay hedefi ve JavaScript döngüsü kullanarak bunu zorlamayı deneyebilirsiniz. JavaScript'inize aşağıdaki kod bloğunu ekleyerek bunu yapabilirsiniz:

//Web sayfanıza bir tıklama olayı ekleyin:
window.onclick = işlev (olay) {
//Web sayfası gövdesinin izlemesine izin vermek için menü çubuğundaki click olayını hedefleyin:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
// Gezintileri her biri arasında dolaşarak gizleyin:
için (var i = 0; i < açılır listeler.uzunluk; ben++) {
var drop = açılır listeler[i];
if (dropped.classList.contains('display')) {
drop.classList.remove('ekran');
}
}
}
}

İşte az önce yaptığınız şeyin bir özeti: Şunu kullanarak üç satır oluşturdunuz: div HTML etiketi. Yüksekliklerini ve genişliklerini ayarlayıp DOM'unuza yerleştirdiniz. Ardından, JavaScript kullanarak bunlara bir tıklama olayı verdiniz.

İlişkili: Web Sitesi Nasıl Yapılır: Yeni Başlayanlar İçin

Navigasyonlarınızın ilk görüntüsünü şu şekilde ayarladınız: Yok sayfa yüklendiğinde onları gizlemek için. Sonra Tıklayın üç satırdaki olay, bu gezinmeleri JavaScript örneklenmiş bir sınıfa göre değiştirir (görüntülenen). Son olarak, gezinmeleri CSS ve JavaScript'leri kullanarak görüntülemek için bu yeni sınıfı kullandınız. toggleİçindekiler yöntem.

İlişkili: HTML, CSS ve JavaScript'te Neumorfik Tasarım Trendleri

Bununla birlikte, CSS'nin geri kalanı tercihinize bağlıdır. Ancak buradaki CSS pasajındaki örnek, kendi stilinizi nasıl oluşturacağınız konusunda size bir fikir vermelidir.

Web Sitenizi Oluştururken Daha Yaratıcı Olun

Görsel olarak çekici bir web sitesi yapmak biraz yaratıcılık gerektirir. Ve kullanıcı dostu bir web sitesinin, kitlenizi basit bir web sitesine göre dönüştürme olasılığı daha yüksektir.

Size burada özel bir gezinme menüsünün nasıl oluşturulacağını göstermiş olsak da, yine de bunun ötesine geçebilir ve onu daha çekici hale getirebilirsiniz. Örneğin, navigasyonların görüntüsünü canlandırabilir, onlara bir arka plan rengi verebilir ve daha fazlasını yapabilirsiniz. Ve ne yaparsanız yapın, web sitenizin kullanıcıların kullanması kolay en iyi tasarım uygulamalarını ve düzenlerini kullandığından emin olun.

Eski Donanımınızı Bir Profesyonel Gibi Nasıl Yeniden Kullanabilirsiniz?

Evinizi karıştıran çok fazla eski teknoloji mi var? Bu teknoloji geri dönüşüm kılavuzunda onunla tam olarak ne yapacağınızı öğrenin!

Sonrakini Oku

Yazar hakkında