Barre de navigation inférieure avec icônes et CSS Tailwind

484 fndkytrk

Ouvrir dans l'éditeur Publiez votre code

Barre de navigation inférieure avec icônes et CSS Tailwind

Recommandé

12 December 2025

Portfolio de développeur : exemples HTML, CSS et JavaScript

13 January 2025

Un code par mo832860

1 October 2025

Animation des ondes cérébrales CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sadece İkon Çubuğu</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="min-h-screen">

<nav class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-300 h-[60px] flex justify-around items-center z-50">
        
        
        <button class="nav-button active" data-page="Ana Sayfa">
            <i class="fa-solid fa-house icon"></i>
        </button>
        
        
        <button class="nav-button" data-page="Arama">
            <i class="fa-solid fa-magnifying-glass icon"></i>
        </button>

<button class="nav-button" data-page="Artı">
            <i class="fa-solid fa-plus-square icon"></i>
        </button>
        
        
        <button class="nav-button" data-page="Profil">
            <i class="fa-solid fa-user icon"></i>
        </button>
    </nav>

/**
         * Aktif butonu belirler ve diğerlerini sıfırlar.
         * @param {string} pageName Yeni aktif sayfanın adı.
         */
        function setActiveButton(pageName) {
            // Tüm butonlardaki aktif (active) sınıfını kaldır
            navButtons.forEach(btn => btn.classList.remove('active'));

// Tıklanan butonu bul ve aktif sınıfını ekle
            const activeButton = document.querySelector(`.nav-button[data-page="${pageName}"]`);
            if (activeButton) {
                activeButton.classList.add('active');
            }
        }

// Tüm butonlara tıklama dinleyicileri ekle
        navButtons.forEach(button => {
            button.addEventListener('click', () => {
                const page = button.getAttribute('data-page');
                setActiveButton(page);
            });
        });

// Sayfa yüklendiğinde varsayılan olarak "Ana Sayfa"yı aktif yap
        window.onload = () => {
            setActiveButton('Ana Sayfa');
        };
    </script>
</body>
</html>

CSS

body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            min-height: 100vh;
            display: flex; 
            flex-direction: column;
            margin: 0;
        }
        /* İkon çubuğuna özgü stiller */
        .nav-button {
            transition: color 0.2s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0;
            color: #4b5563; /* Varsayılan gri renk */
            flex-grow: 1; /* Butonların eşit genişlikte olması için */
        }
        .nav-button.active {
            color: #1f2937; /* Aktif olduğunda koyu renk (Vurgu) */
        }
        .nav-button:hover {
            color: #ef4444; /* Hover'da kırmızı renk */
        }
        .icon {
            font-size: 1.5rem;
        }
        /* Navigasyon çubuğu sabitlendiği için yukarıdaki tüm boşluğu kaplar */
        .fill-space {
            flex-grow: 1;
            padding-bottom: 60px; /* Çubuğun yerini içerikte boş bırakır */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }