Webleb - UI Elements

HTML

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

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

#nav {
            background-color: #2c3e50;
            padding: 1rem 2rem;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            display: inline-flex;
            gap: 2rem;
        }

#nav a {
            color: #ecf0f1;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 0.5rem 1rem;
            transition: color 0.3s ease;
            position: relative;
            z-index: 1;
        }

#nav a:hover {
            color: #3498db;
        }

.marker {
            position: absolute;
            bottom: 10px;
            left: 0;
            height: 3px;
            background-color: #3498db;
            border-radius: 3px;
            transition: all 0.3s ease;
            z-index: 0;
        }
    </style>
</head>
<body>
    <nav id="nav">
        <a href="#" onmouseenter="moveMarker(this)">HOME</a>
        <a href="#" onmouseenter="moveMarker(this)">CODELABS</a>
        <a href="#" onmouseenter="moveMarker(this)">CONTACT</a>
        <div class="marker" id="marker"></div>
    </nav>

// Sayfa yüklendiğinde HOME menüsüne marker'ı yerleştir
        window.addEventListener('load', function() {
            const homeLink = document.querySelector('#nav a:first-child');
            if (homeLink) {
                moveMarker(homeLink);
            }
        });

// Pencere boyutu değiştiğinde marker'ın pozisyonunu güncelle (opsiyonel)
        window.addEventListener('resize', function() {
            const activeElement = document.querySelector('#nav a:hover');
            if (activeElement) {
                moveMarker(activeElement);
            } else {
                const homeLink = document.querySelector('#nav a:first-child');
                if (homeLink) {
                    moveMarker(homeLink);
                }
            }
        });
    </script>
</body>
</html>

CSS

JS

login

Recommended