Contoh Aplikasi

Beranda
CSS

Tutorial Membuat Menu Navigasi Glowing Responsif dengan CSS dan Font Awesome

Artikel berikut membahas mengenai Tutorial Membuat Menu Navigasi Glowing Responsif dengan CSS dan Font Awesome
Tutorial Membuat Menu Navigasi Glowing Responsif dengan CSS dan Font Awesome

Menu navigasi adalah komponen penting dalam desain web modern. Dalam tutorial ini, saya akan menunjukkan cara membuat menu navigasi dengan efek glowing yang menarik dan responsif menggunakan CSS3 dan Font Awesome.

Mengapa Membuat Menu Navigasi Glowing?

Menu navigasi dengan efek glowing memiliki beberapa keunggulan:

  • Visual yang menarik: Efek glowing membuat menu lebih hidup dan interaktif
  • Pengalaman pengguna lebih baik: Efek hover memberikan feedback visual saat pengguna berinteraksi
  • Responsif: Tampilan optimal di semua perangkat
  • Modern: Menggunakan teknik CSS terbaru seperti custom properties dan backdrop-filter

Langkah 1: Persiapan Struktur HTML

Pertama, kita siapkan struktur dasar HTML dengan elemen navigasi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Navigasi Glowing</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@300;400;600&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="glowing-nav">
        <ul>
            <li>
                <a href="#">
                    <i class="fas fa-home"></i>
                    <span>Beranda</span>
                </a>
            </li>
            <!-- Item menu lainnya -->
        </ul>
    </nav>
</body>
</html>

Langkah 2: Styling Dasar dengan CSS

Buat file style.css dan tambahkan styling dasar:

:root {
    --clr-primary: #0ff;
    --clr-secondary: #f0f;
    --clr-accent: #ff0;
    --clr-dark: #111;
    --clr-light: #fff;
    --transition: all 0.3s ease-out;
}

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

body {
    background-color: var(--clr-dark);
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

Langkah 3: Membuat Efek Glowing

Tambahkan efek glowing pada item menu:

.glowing-nav a {
    position: relative;
    color: var(--clr-light);
    text-decoration: none;
    font-size: clamp(0.8rem, 2vw, 1rem);
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glowing-nav a:hover {
    background: var(--clr);
    box-shadow: 0 0 15px var(--clr),
                0 0 30px var(--clr),
                0 0 60px var(--clr);
    transform: translateY(-5px);
}

Langkah 4: Efek Tambahan

Tambahkan efek sudut dan animasi ikon:

.glowing-nav a::before,
.glowing-nav a::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--clr);
    transition: var(--transition);
    opacity: 0;
}

.glowing-nav a:hover::before,
.glowing-nav a:hover::after {
    opacity: 1;
}

.glowing-nav a:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

Langkah 5: Membuat Responsif

Tambahkan media queries untuk tampilan mobile:

@media (max-width: 768px) {
    .glowing-nav ul {
        gap: 10px;
    }
    
    .glowing-nav li {
        flex: 1 1 80px;
        min-width: 80px;
    }
    
    .glowing-nav a {
        padding: 12px 5px;
    }
}

Kesimpulan

Dengan mengikuti tutorial ini, Anda telah membuat menu navigasi glowing yang:

  • Memiliki efek visual menarik
  • Responsif di semua perangkat
  • Interaktif dengan feedback visual
  • Optimized untuk SEO

Menu ini cocok untuk berbagai jenis website modern seperti portofolio, startup tech, atau situs gaming. Anda bisa menyesuaikan warna dan efek sesuai kebutuhan brand Anda.

Kode Lengkap 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Menu Navigasi Responsif</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
    <style>
        /* Reset dan Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --clr-primary: #0ff;
            --clr-secondary: #f0f;
            --clr-accent: #ff0;
            --clr-dark: #111;
            --clr-light: #fff;
            --transition: all 0.3s ease-out;
        }

        body {
            background-color: var(--clr-dark);
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }

        /* Menu Navigasi */
        .glowing-nav {
            width: 100%;
            max-width: 1200px;
        }

        .glowing-nav ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            list-style: none;
            padding: 0;
        }

        .glowing-nav li {
            flex: 1 1 120px;
            min-width: 100px;
            max-width: 200px;
        }

        .glowing-nav a {
            position: relative;
            color: var(--clr-light);
            text-decoration: none;
            font-size: clamp(0.8rem, 2vw, 1rem);
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: var(--transition);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            text-align: center;
        }

        .glowing-nav a i {
            font-size: clamp(1.5rem, 4vw, 2rem);
            margin-bottom: 8px;
            transition: var(--transition);
            color: var(--clr);
        }

        .glowing-nav a span {
            font-family: 'Orbitron', sans-serif;
            font-weight: 500;
            font-size: clamp(0.6rem, 1.5vw, 0.8rem);
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: var(--transition);
        }

        /* Efek Hover */
        .glowing-nav a:hover {
            background: var(--clr);
            box-shadow: 0 0 15px var(--clr),
                        0 0 30px var(--clr),
                        0 0 60px var(--clr);
            transform: translateY(-5px);
            border-color: transparent;
        }

        .glowing-nav a:hover i {
            transform: scale(1.2);
            color: var(--clr-light);
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
        }

        .glowing-nav a:hover span {
            letter-spacing: 1.5px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
        }

        .glowing-nav a::before,
        .glowing-nav a::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border: 2px solid var(--clr);
            transition: var(--transition);
            opacity: 0;
        }

        .glowing-nav a::before {
            top: -5px;
            left: -5px;
            border-right: none;
            border-bottom: none;
        }

        .glowing-nav a::after {
            bottom: -5px;
            right: -5px;
            border-left: none;
            border-top: none;
        }

        .glowing-nav a:hover::before,
        .glowing-nav a:hover::after {
            opacity: 1;
        }

        /* Warna Item */
        .glowing-nav ul li:nth-child(1) a { --clr: #ff0; }
        .glowing-nav ul li:nth-child(2) a { --clr: #0f0; }
        .glowing-nav ul li:nth-child(3) a { --clr: #0ff; }
        .glowing-nav ul li:nth-child(4) a { --clr: #f0f; }
        .glowing-nav ul li:nth-child(5) a { --clr: #00f; }

        /* Responsif untuk Mobile */
        @media (max-width: 768px) {
            .glowing-nav ul {
                gap: 10px;
            }
            
            .glowing-nav li {
                flex: 1 1 80px;
                min-width: 80px;
            }
            
            .glowing-nav a {
                padding: 12px 5px;
            }
            
            .glowing-nav a i {
                margin-bottom: 5px;
            }
        }

        @media (max-width: 480px) {
            .glowing-nav ul {
                gap: 8px;
            }
            
            .glowing-nav a {
                padding: 10px 3px;
                border-radius: 5px;
            }
            
            .glowing-nav a span {
                font-size: 0.6rem;
            }
        }
    </style>
</head>
<body>
    <nav class="glowing-nav">
        <ul>
            <li>
                <a href="#">
                    <i class="fas fa-home"></i>
                    <span>Beranda</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-info-circle"></i>
                    <span>Tentang</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-concierge-bell"></i>
                    <span>Layanan</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-briefcase"></i>
                    <span>Portofolio</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-envelope"></i>
                    <span>Kontak</span>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>