กำลังดำเนินการ กรุณารอ...
Navbar | สรุปรายงาน จัดทำโปรแกรม แจกฟรีสคริปต์ แจกฟรีโค้ด ดาวน์โหลดอัตโนมัติ | CodesKub.com

Navbar

วิธีการทำงาน:
HTML: เป็นโครงสร้างหลักของ Navbar มีลิ้งค์และการจัดโครงสร้างสำหรับเมนู.
CSS: ใช้ในการตกแต่ง navbar ทั้งในส่วนของสี ตัวอักษร และการแสดงผลในขนาดหน้าจอต่างๆ (responsive).
JavaScript: ช่วยให้ปุ่ม toggle ทำงาน โดยการเพิ่มและลบคลาส active เพื่อแสดงหรือซ่อนเมนูเมื่อคลิกที่ปุ่ม hamburger บนหน้าจอมือถือ.

สามารถนำโค้ดนี้ไปใช้งานในโปรเจกต์ของคุณได้ทันที.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="navbar.css">
    <title>Navbar</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="navbar-logo">Logo</a>
            <div class="navbar-menu" id="navbarMenu">
                <ul class="navbar-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="navbar-toggle" id="navbarToggle">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <script src="navbar.js"></script>
</body>
</html>

CSS

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

body {
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.navbar-logo {
    color: white;
    font-size: 24px;
    text-decoration: none;
}

.navbar-menu {
    display: flex;
}

.navbar-links {
    list-style: none;
    display: flex;
}

.navbar-links li {
    margin-left: 20px;
}

.navbar-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

.navbar-links a:hover {
    color: #f4b41a;
}

.navbar-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background-color: white;
    margin: 4px 0;
}

@media (max-width: 768px) {
    .navbar-menu {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background-color: #333;
        text-align: center;
    }

    .navbar-menu.active {
        display: flex;
        flex-direction: column;
    }

    .navbar-links {
        flex-direction: column;
    }

    .navbar-links li {
        margin: 15px 0;
    }

    .navbar-toggle {
        display: flex;
    }
}

JavaScript

document.getElementById('navbarToggle').addEventListener('click', function () {
    const navbarMenu = document.getElementById('navbarMenu');
    navbarMenu.classList.toggle('active');
});