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.

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:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

JavaScript'i ekleyin:

Kindle Fire'da google play nasıl yapılır

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

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.

İlgili: 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:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

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

İlgili: 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 bir JavaScript örneklenmiş sınıfına 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.

İlgili: 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 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.

Paylaş Paylaş Cıvıldamak E-posta Bilmeniz Gereken 15 Windows Komut İstemi (CMD) Komutu

Komut istemi hala güçlü bir Windows aracıdır. İşte her Windows kullanıcısının bilmesi gereken en kullanışlı CMD komutları.

Sonrakini Oku İlgili konular

Programlama
HTML
CSS
JavaScript
Kodlama İpuçları

Yazar hakkında Idisou Omisola(94 Makale Yayımlandı)

Idowu akıllı teknoloji ve üretkenlik konusunda tutkulu. Boş zamanlarında kodlamayla uğraşıyor ve canı sıkılınca satranç tahtasına geçiyor ama arada sırada rutinden kopmayı da seviyor. İnsanlara modern teknolojinin yolunu gösterme tutkusu onu daha fazla yazmaya motive ediyor.

Idowu Omisola'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın

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

Web Sitenizi Oluştururken Daha Yaratıcı Olun

Haber bültenimize abone ol