Desktop ve Mobil Menü (Javascript - Html5 - Css3)

Bu kod, bir web sitesi başlığı altında masaüstü ve mobil cihazlara özgü menüler oluşturan basit bir HTML, CSS ve JavaScript örneğini içerir. Masaüstü görünümde sağ üst köşede menü öğeleri görüntülenirken, mobil cihazlarda menü öğeleri bir düğme ile açılıp kapatılabilir.

HTML Açıklama: Bu HTML belgesi, web sayfasının temel yapısını oluşturur. Başlık, viewport ayarları, stil dosyası ve JavaScript dosyası içeriği ile birlikte sağlanır. Başlık, web sayfasının adını ve açıklamasını tanımlar. Header içerisinde logo, masaüstü menü ve mobil menü düğmesi bulunur.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menü</title>
</head>
<body>
    <header>
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <nav class="desktop-menu">
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkımızda</a></li>
                <li><a href="#">Hizmetler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </nav>
        <button id="mobile-toggle" class="mobile-button">Menü</button>
    </header>
</body>
</html>

CSS Açıklama: Bu CSS dosyası, web sayfasının görünümünü düzenler. Header stilini tanımlar, masaüstü menü öğelerini yan yana sıralar ve mobil menü düğmesini gizler. Media query ile mobil cihazlarda menünün nasıl görüntüleneceğini ayarlar.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
}

/* Masaüstü için stil */
.desktop-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.desktop-menu ul {
    display: flex;
}

.desktop-menu li {
    margin-right: 20px;
}

.desktop-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Mobil cihazlar için stil */
.mobile-button {
    display: none;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .desktop-menu {
        display: none;
    }

    .mobile-button {
        display: block;
    }

    .mobile-menu {
        display: block;
    }

    .desktop-menu ul {
    display: grid;
    position: absolute;
    background: #333333;
    top: 42px;
    width: 100%;
    left: 0;
    padding: 15px 0 0 25px;
}
.desktop-menu ul li{
    margin: 0 0 15px 0;
}
}

JavaScript Açıklama: Bu JavaScript dosyası, mobil menüyü açma ve kapatma işlevselliğini sağlar. Mobil menü düğmesine tıklama olayını dinler ve menüyü açıp kapatır.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
// Mobil menüyü açma ve kapatma işlevleri
const mobileToggle = document.getElementById("mobile-toggle");
const mobileMenu = document.querySelector(".desktop-menu");

mobileToggle.addEventListener("click", () => {
    if (mobileMenu.style.display === "block") {
        mobileMenu.style.display = "none";
    } else {
        mobileMenu.style.display = "block";
    }
});

 

 

Kategoriler