Responsive Navigasyon Menüsü

Bu projede, farklı display özelliklerini kullanarak basit bir yatay navigasyon menüsü oluşturacaksınız. Bu menü, ekran boyutu küçüldüğünde dikey hale gelecek şekilde responsive olacaktır.

Proje Detayları

Bu projede, farklı display özelliklerini kullanarak basit bir yatay navigasyon menüsü oluşturacaksınız. Bu menü, ekran boyutu küçüldüğünde dikey hale gelecek şekilde responsive olacaktır.

Proje Adımları:

  1. Bir HTML dosyası oluşturun ve bir navigasyon menüsü için liste (<ul> ve <li>) yapısını hazırlayın.
  2. Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
  3. Liste öğelerinin (<li>) varsayılan madde işaretlerini kaldırın.
  4. Geniş ekranlar için liste öğelerini yan yana getirmek üzere display: inline-block; kullanın.
  5. Liste öğelerine padding ve margin ekleyerek aralarını açın.
  6. Linklere (<a>) stil verin (renk, alt çizgi kaldırma vb.).
  7. Media query kullanarak küçük ekranlar (örneğin, 600px altı) için liste öğelerinin display: block; olmasını sağlayın, böylece alt alta gelsinler.
  8. Küçük ekranlarda menü öğelerini ortalayın veya sola hizalayın.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigasyon Menüsü</title>
    <link rel="stylesheet" href="nav-menu.css">
</head>
<body>
    <nav class="main-nav">
        <ul>
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Hizmetler</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>

    <!-- Sayfa içeriği buraya gelebilir -->
    <div style="padding: 20px; margin-top: 20px; border: 1px dashed #ccc;">
        Sayfa İçeriği Alanı
    </div>
</body>
</html>

Bu HTML dosyasını ve boş bir nav-menu.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.