Contoh Aplikasi

Beranda
CSS

Tutorial Lengkap Membuat Navigasi Bersinar Glowing Navbar Responsif

Artikel berikut membahas mengenai Tutorial Lengkap Membuat Navigasi Bersinar Glowing Navbar Responsif
Tutorial Lengkap Membuat Navigasi Bersinar Glowing Navbar Responsif

Pelajari cara membuat navigasi bersinar (glowing navbar) yang responsif dengan efek hover menakjubkan menggunakan HTML, CSS, dan JavaScript. Kode lengkap tersedia!

Pendahuluan

Navigasi bersinar (glowing navbar) adalah elemen UI modern yang semakin populer di kalangan pengembang web. Efek glowing memberikan kesan futuristik dan meningkatkan interaktivitas pengguna. Dalam tutorial ini, kita akan membuat glowing navbar yang:

  • Responsif di semua perangkat
  • Memiliki efek hover yang menakjubkan
  • Dilengkapi dengan animasi smooth
  • Support mobile dengan menu hamburger

Langkah 1: Persiapan Struktur HTML

Pertama, buat struktur dasar HTML dengan elemen navbar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Navbar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Orbitron:wght@600&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="glowing-navbar">
        <!-- Isi navbar akan ditambahkan disini -->
    </nav>
</body>
</html>

Langkah 2: Membangun Komponen Navbar

Tambahkan komponen navbar ke dalam tag <nav>:

<div class="navbar-container">
    <div class="logo">
        <span>GLOW</span>
    </div>
    <ul class="nav-links">
        <li><a href="#"><i class="fas fa-home"></i><span>Home</span></a></li>
        <li><a href="#"><i class="fas fa-user"></i><span>About</span></a></li>
        <li><a href="#"><i class="fas fa-briefcase"></i><span>Work</span></a></li>
        <li><a href="#"><i class="fas fa-envelope"></i><span>Contact</span></a></li>
    </ul>
    <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>

Langkah 3: Styling Dasar dengan CSS

Buat styling dasar untuk navbar:

:root {
    --primary-glow: #00f7ff;
    --secondary-glow: #ff00e6;
    --bg-color: #0a0a1a;
    --text-color: #ffffff;
    --transition-speed: 0.3s;
}

.glowing-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(10, 10, 26, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
}

Langkah 4: Membuat Efek Glowing

Tambahkan efek glowing pada hover:

.nav-links li a:hover {
    color: var(--primary-glow);
    text-shadow: 0 0 15px var(--primary-glow);
}

.nav-links li a:hover i {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

.glowing-navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 247, 255, 0.1), 
        rgba(255, 0, 230, 0.1), 
        rgba(0, 247, 255, 0.1));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.glowing-navbar:hover::after {
    opacity: 1;
}

Langkah 5: Membuat Responsif

Tambahkan media queries untuk tampilan mobile:

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(10, 10, 26, 0.95);
        clip-path: circle(0px at 90% -10%);
        transition: clip-path 0.5s ease-out;
    }
    
    .nav-links.active {
        clip-path: circle(1000px at 90% -10%);
    }
    
    .hamburger {
        display: flex;
    }
}

Langkah 6: Menambahkan Interaktivitas dengan JavaScript

Tambahkan fungsi untuk menu hamburger dan efek scroll:

document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    
    // Toggle menu hamburger
    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        hamburger.classList.toggle('active');
    });
    
    // Efek glow saat scroll
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.style.boxShadow = '0 0 30px rgba(0, 247, 255, 0.3)';
        } else {
            navbar.style.boxShadow = '0 0 20px rgba(0, 247, 255, 0.1)';
        }
    });
});

Kode Lengkap Glowing Navbar

Berikut adalah kode lengkap untuk glowing navbar responsif:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Navbar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Orbitron:wght@600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-glow: #00f7ff;
            --secondary-glow: #ff00e6;
            --bg-color: #0a0a1a;
            --text-color: #ffffff;
            --transition-speed: 0.3s;
        }

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

        body {
            background-color: var(--bg-color);
            font-family: 'Poppins', sans-serif;
            color: var(--text-color);
            overflow-x: hidden;
            padding-top: 70px;
        }

        .glowing-navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 2rem;
            background: rgba(10, 10, 26, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
            transition: all 0.5s ease;
        }

        .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            font-weight: 600;
            background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
            transition: var(--transition-speed);
        }

        .logo:hover {
            text-shadow: 0 0 20px rgba(0, 247, 255, 0.6);
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-color);
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
            position: relative;
            transition: var(--transition-speed);
        }

        .nav-links li a i {
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            transition: var(--transition-speed);
        }

        .nav-links li a span {
            font-size: 0.8rem;
            letter-spacing: 1px;
        }

        .nav-links li a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
            transition: var(--transition-speed);
        }

        .nav-links li a:hover {
            color: var(--primary-glow);
        }

        .nav-links li a:hover::before {
            width: 100%;
        }

        .nav-links li a:hover i {
            transform: translateY(-5px);
            text-shadow: 0 0 15px var(--primary-glow);
        }

        .hamburger {
            display: none;
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
        }

        .hamburger .line {
            width: 25px;
            height: 2px;
            background: var(--text-color);
            transition: var(--transition-speed);
        }

        .glowing-navbar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                rgba(0, 247, 255, 0.1), 
                rgba(255, 0, 230, 0.1), 
                rgba(0, 247, 255, 0.1));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .glowing-navbar:hover::after {
            opacity: 1;
        }

        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                flex-direction: column;
                align-items: center;
                background: rgba(10, 10, 26, 0.95);
                padding: 2rem 0;
                clip-path: circle(0px at 90% -10%);
                transition: clip-path 0.5s ease-out;
            }

            .nav-links.active {
                clip-path: circle(1000px at 90% -10%);
            }

            .hamburger {
                display: flex;
            }

            .hamburger.active .line:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .hamburger.active .line:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active .line:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }
        }

        .content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary-glow);
            margin-bottom: 1rem;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
        }
        
        p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <nav class="glowing-navbar">
        <div class="navbar-container">
            <div class="logo">
                <span>GLOW</span>
            </div>
            <ul class="nav-links">
                <li><a href="#"><i class="fas fa-home"></i><span>Home</span></a></li>
                <li><a href="#"><i class="fas fa-user"></i><span>About</span></a></li>
                <li><a href="#"><i class="fas fa-briefcase"></i><span>Work</span></a></li>
                <li><a href="#"><i class="fas fa-envelope"></i><span>Contact</span></a></li>
            </ul>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
    </nav>

    <div class="content">
        <h1>Glowing Navbar Demo</h1>
        <p>This is a demonstration of a modern glowing navigation bar with smooth hover effects and responsive design.</p>
        <p>Scroll down to see the navbar's glow effect change. Try hovering over the menu items to see the glowing animations.</p>
        <p>On mobile devices, the menu will collapse into a hamburger menu with a smooth expanding animation.</p>
        <div style="height: 1000px;"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');
            const navbar = document.querySelector('.glowing-navbar');

            hamburger.addEventListener('click', () => {
                navLinks.classList.toggle('active');
                hamburger.classList.toggle('active');
            });

            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    navbar.style.boxShadow = '0 0 30px rgba(0, 247, 255, 0.3)';
                } else {
                    navbar.style.boxShadow = '0 0 20px rgba(0, 247, 255, 0.1)';
                }
            });

            const navItems = document.querySelectorAll('.nav-links li a');
            navItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const ripple = document.createElement('span');
                    ripple.classList.add('ripple');
                    this.appendChild(ripple);
                    
                    const x = e.clientX - e.target.getBoundingClientRect().left;
                    const y = e.clientY - e.target.getBoundingClientRect().top;
                    
                    ripple.style.left = `${x}px`;
                    ripple.style.top = `${y}px`;
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 1000);
                });
            });

            setTimeout(() => {
                navbar.style.opacity = '1';
            }, 300);
        });
    </script>
</body>
</html>

Kesimpulan

Glowing navbar adalah komponen UI modern yang dapat meningkatkan pengalaman pengguna dan estetika website Anda. Dengan mengikuti tutorial ini, Anda telah mempelajari:

  1. Cara membuat efek glowing dengan CSS
  2. Teknik animasi hover yang smooth
  3. Pembuatan navbar responsif dengan menu hamburger
  4. Implementasi efek visual tambahan seperti ripple

Anda dapat menyesuaikan warna, ukuran, dan efek sesuai kebutuhan desain Anda. Kode ini siap digunakan untuk berbagai jenis website modern seperti portofolio, startup tech, atau situs gaming.