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

Replicant · 11 Ağu 2021

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.

HTML ile başlayacağız :

Kod:

<!DOCTYPE html>
<html>
<head>
    <title>Mobile Navigation Menu</title>
</head>
<body>
    <section>
               <!-- Create three divs to represent the three-line dropdown menu bar -->
        <div id="toggle-container">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
        </div>
                <!-- Add your navigations here -->
                <div id="toggle-content" class="toggle-content">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </div>
    </section>
</body>

CSS:

Kod:

/*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:

Kod:

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.

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:

Kod:

//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 < dropdowns.length; i++) {
      var dropped = dropdowns[i];
      if (dropped.classList.contains('display')) {
        dropped.classList.remove('display');
      }
    }
  }
}

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

Sayfa yüklendiğinde onları gizlemek için gezinmelerinizin ilk görüntüsünü hiçbiri olarak ayarladınız . Ardından, üç satırdaki click olayı, JavaScript'in örneklenmiş sınıfına ( görüntülenen ) dayalı olarak bu gezinmeleri değiştirir . Son olarak, gezinmeleri CSS ve JavaScript'in toggleContents yöntemini kullanarak görüntülemek için bu yeni sınıfı kullandınız .

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.

Replicant

MamiVEVO' Alıntı:
Ellerine sağlık.
Paylaşım için teşekkürler

Rica ederim

MamiVEVO · 11 Ağu 2021

Ellerine sağlık.
Paylaşım için teşekkürler

Replicant · 11 Ağu 2021

MamiVEVO' Alıntı:
Ellerine sağlık.
Paylaşım için teşekkürler

Rica ederim

DorukZarslan · 11 Ağu 2021

Paylaşım için teşşekkürler <3

Replicant · 11 Ağu 2021

DorukZarslan' Alıntı:
Paylaşım için teşşekkürler <3

Rica ederim

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

Replicant

Ehlî olmuşum elemlerin

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

Web Sitenizi Oluştururken Daha Yaratıcı Olun

En Çok Reaksiyon Alan Mesajlar

Replicant

MamiVEVO

sosyalmerkezin.com

Replicant

Ehlî olmuşum elemlerin

DorukZarslan

Profeyşınıl lider

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

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

Replicant

Ehlî olmuşum elemlerin

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

Web Sitenizi Oluştururken Daha Yaratıcı Olun​

En Çok Reaksiyon Alan Mesajlar

Replicant

MamiVEVO

sosyalmerkezin.com

Replicant

Ehlî olmuşum elemlerin

DorukZarslan

Profeyşınıl lider

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

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

Web Sitenizi Oluştururken Daha Yaratıcı Olun