टेलविंड सीएसएस के साथ बॉटम आइकन नेविगेशन बार

अनुशंसित

25 August 2024

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

15 September 2025

<!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;
        }

टेलविंड सीएसएस के साथ बॉटम आइकन नेविगेशन बार

अनुशंसित

सीएसएस 3डी सौर प्रणाली

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

सीएसएस विचार बुलबुला एनीमेशन

HTML

CSS

JS

अनुशंसित

सीएसएस 3डी सौर प्रणाली

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

सीएसएस विचार बुलबुला एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS