Membuat Mobile Navbar dengan HTML CSS JS

Pada artikel tutorial kali ini, kita akan belajar bagaimana membuat Mobile Navbar dengan HTML CSS JS. Mobile Navbar berguna ketika website kita diakses di perangkat mobile (handphone), maka menu navigasi pada website akan terlihat lebih rapi karena disembunyikan di navbar.

Berikut video step by step di Instagram WebHozz https://www.instagram.com/webhozz/ yang bisa kami ikuti.

View this post on Instagram

A post shared by Kursus Website Android Digital Marketing (@webhozz)

Berikut kode lengkapnya

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Navbar </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .mobile-container {
            max-width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            color: rgb(68, 68, 68);
            border-radius: 10px;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
            position: relative;
        }

        .topnav #menu {
            display: none;
        }

        .topnav a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            display: block;
        }

        .topnav a.icon {
            background: rgb(66, 66, 66);
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav a.icon:hover {
            background-color: #ddd;
            color: black;
        }

        .active {
            background-color: #027a3e;
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="mobile-container">

        <div class="topnav">
            <a href="#home" class="active">WEBHOZZ</a>
            <div id="menu">
                <a href="#news">News</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="showMenu()">
                <i class="fa fa-bars"></i>
            </a>
        </div>

        <div style="padding-left:16px">
            <h3>Welcome to My Website</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatum impedit libero? Nisi
                natus optio libero voluptate quo impedit reiciendis rem omnis ipsa, veritatis fuga repudiandae dolore in
                ea quaerat?
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatum impedit libero? Nisi
                natus optio libero voluptate quo impedit reiciendis rem omnis ipsa, veritatis fuga repudiandae dolore in
                ea quaerat?
            </p>
        </div>

    </div>

    <script>
        function showMenu() {
            var x = document.getElementById("menu");
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
        }
    </script>

</body>

</html>

Selamat belajar dan semoga bermanfaat 🙂

Related posts: