Mobil ve Masaüstü Uyumlu Site Şablonu: Adım Adım Rehber

Ekim 31, 2024

Web tasarımında mobil ve masaüstü uyumluluğu sağlamak kullanıcı deneyimini en üst seviyeye çıkaran önemli unsurlardan biridir. Bu yazıda, hem masaüstünde klasik yatay menü hem de mobil cihazlarda açılır menü olarak işlev görecek bir HTML menü tasarımını adım adım açıklayacağız.

Menü Tasarımı Neden Önemlidir?

Responsive (duyarlı) tasarım, ekran genişliklerine göre otomatik olarak uyum sağlayan yapılar oluşturmayı hedefler. Özellikle mobil cihaz kullanıcıları için kolay gezinim sağlayan bir menü, sitenizdeki kullanıcı deneyimini büyük ölçüde iyileştirir.

Aşağıda hem mobil hem de masaüstü uyumlu HTML menümüzü oluşturacak adımları ve her adımda ilgili kod açıklamalarını bulabilirsiniz.

Adım 1: HTML Yapısını Oluşturun

İlk olarak temel HTML yapısını kuruyoruz. Bu yapıda, header etiketi içerisine bir başlık ve mobil cihazlar için bir açılır menü simgesi eklenmiştir. nav etiketi içinde bağlantı öğelerini listeliyoruz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobil ve Masaüstü Uyumlu Menü</title>
    <style>
        /* CSS kodları aşağıdaki adımda açıklanacaktır */
    </style>
</head>
<body>

<header>
    <h1>Başlık</h1>
    <button class="toggle-menu">&#9776;</button>
</header>

<nav>
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkında</a>
    <a href="#">Hizmetler</a>
    <a href="#">Ürünler</a>
    <a href="#">İletişim</a>
</nav>

<div class="container">
    <h2>Hoş Geldiniz!</h2>
    <p>Bu şablon her ekran boyutuna otomatik uyum sağlar.</p>
</div>

<footer>
    <p>&copy; 2024 Tüm Hakları Saklıdır</p>
</footer>

</body>
</html>
Bu HTML yapısı ile temel başlık, menü ve içerik alanlarını belirledik. Şimdi, mobil ve masaüstü uyumluluğu için CSS stil düzenlemelerine geçelim.

Adım 2: CSS ile Stil ve Responsive Ayarları

Şimdi menümüzün hem mobil cihazlarda açılır hale gelmesi hem de masaüstü cihazlarda yatay olarak görünmesi için CSS stil ayarlarını ekleyeceğiz. Ayrıca, menü bağlantılarına kolay erişim için bazı hover efektleri ekleyeceğiz.

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
    }

    header {
        background: #333;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
        position: relative;
    }

    nav {
        background: #444;
        padding: 5px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav a {
        color: #fff;
        text-decoration: none;
        padding: 2px 5px;
        margin: 5px 5px;
        text-align: center;
    }

    nav a:hover {
        background: #555;
    }

    .toggle-menu {
        cursor: pointer;
        color: #fff;
        background: #333;
        border: none;
        padding: 10px;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1000;
        display: none;
    }

    .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    footer {
        text-align: center;
        padding: 20px;
        background: #333;
        color: #fff;
    }

    @media (max-width: 768px) {
        nav {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 50px;
            left: 0;
            padding: 5px;
            width: auto;
            min-width: 150px;
            max-width: 200px;
            z-index: 1500;
        }

        nav.active {
            display: flex;
        }

        nav a {
            width: 100%;
            max-width: none;
            padding: 2px 5px;
            text-align: left;
        }

        .toggle-menu {
            display: block;
        }
    }

    @media (min-width: 769px) {
        .toggle-menu {
            display: none;
        }
    }
</style>
Bu CSS ile mobil cihazlarda toggle-menu sınıfına sahip bir düğme görüntülenecek, menü bağlantıları ise açılır kapanır şekilde çalışacak. Masaüstünde ise menü bağlantıları yatay bir dizilimde olacaktır.

Adım 3: JavaScript ile Mobil Menüyü Açılır/Kapanır Hale Getirme

Mobil menüyü açmak için JavaScript ile basit bir click etkinliği tanımlıyoruz. toggle-menu sınıfına sahip düğme tıklandığında, nav etiketine active sınıfını ekleyip kaldırarak menünün açılıp kapanmasını sağlıyoruz.

<script>
    const toggleMenu = document.querySelector('.toggle-menu');
    const nav = document.querySelector('nav');

    toggleMenu.addEventListener('click', () => {
        nav.classList.toggle('active');
    });
</script>
Bu JavaScript kodu ile mobil cihazlarda kullanıcı menü ikonuna tıkladığında, nav etiketine active sınıfı eklenir veya kaldırılır, böylece menü açılır veya kapanır.

Kodun Tam Hali

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobil ve Masaüstü Uyumlu Menü</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        header {
            background: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            position: relative;
        }

        nav {
            background: #444;
            padding: 5px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 2px 5px;
            margin: 5px 5px;
            text-align: center;
        }

        nav a:hover {
            background: #555;
        }

        .toggle-menu {
            cursor: pointer;
            color: #fff;
            background: #333;
            border: none;
            padding: 10px;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            display: none; /* Masaüstü için başlangıçta gizle */
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        footer {
            text-align: center;
            padding: 20px;
            background: #333;
            color: #fff;
            position: relative;
            bottom: 0;
            width: 100%;
            z-index: 1; /* Mobil menü altında kalır */
        }

        /* Mobil menü ve küçük ekranlar için */
        @media (max-width: 768px) {
            nav {
                display: none; /* Başlangıçta gizli */
                flex-direction: column; /* Dikey hizalama */
                position: absolute;
                top: 50px;
                left: 0;
                padding: 5px;
                width: auto; /* Genişlik otomatik */
                min-width: 150px; /* Minimum genişlik ayarla */
                max-width: 200px; /* Maksimum genişlik ayarla */
                z-index: 1500; /* Footer altında kalmasın */
            }

            nav.active {
                display: flex; /* Menü açıldığında görünür */
            }

            nav a {
                width: 100%; /* Tam genişlik */
                max-width: none; /* Genişlik sınırını kaldır */
                padding: 2px 5px;
                text-align: left; /* Sol hizalı */
            }

            .toggle-menu {
                display: block; /* Mobilde göster */
            }
        }

        /* Masaüstü için medya sorgusu */
        @media (min-width: 769px) {
            .toggle-menu {
                display: none; /* Masaüstünde gizle */
            }
        }
    </style>
</head>
<body>

<header>
    <h1>Başlık</h1>
    <button class="toggle-menu">&#9776; <!-- Hamburger Menü İkonu --></button>
</header>

<nav>
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkında</a>
    <a href="#">Hizmetler</a>
    <a href="#">Ürünler</a>
    <a href="#">İletişim</a>
</nav>

<div class="container">
    <h2>Hoş Geldiniz!</h2>
    <p>Bu şablon her ekran boyutuna otomatik uyum sağlar. Menü, masaüstü cihazlarda yatay olarak görünürken, mobil cihazlarda hamburger menü simgesine tıklanarak açılır.</p>
</div>

<footer>
    <p>&copy; 2024 Tüm Hakları Saklıdır</p>
</footer>

<script>
    const toggleMenu = document.querySelector('.toggle-menu');
    const nav = document.querySelector('nav');

    toggleMenu.addEventListener('click', () => {
        nav.classList.toggle('active');
    });
</script>

</body>
</html>

Sonuç

Bu adımları takip ederek hem masaüstü hem de mobil uyumlu bir menü tasarımı oluşturduk. Mobil cihazlarda hamburger menü ikonu ile açılır kapanır bir menüye sahip olurken, masaüstü cihazlarda klasik yatay bir menü görünümü elde ettik. Bu sayede her iki platformda da kullanıcı dostu bir gezinti deneyimi sağlanabilir.

Bu menü yapısı ve stil dosyası ile tüm ekran boyutlarına uyum sağlayan şık bir tasarım elde etmiş olduk. Umarım faydalı olmuştur!

Not: Bu yazıda kullanılan kodları dilediğiniz gibi değiştirebilir ve projenize entegre edebilirsiniz.

Yorum Gönder

0 Yorumlar