Cara Cepat Membuat Navbar - Bootstrap Header Menu Navigation

Pada kesempatan kali ini saya akan membagikan sedikit ilmu tentang Bootstrap Header Menu Navigation. Disini didalam konten ini
kita akan belajar bersama, berbagi bersama, mengamalkan bersama, dan kita coba bersama-sama.

Sebelum memmulai untuk membuat Bootstrap Header Menu navigation, setidaknya kita sudah menyiapkan file-file yang diperlukan, bila belum
ada teman-teman yang belum menyiapkan atau belum mempunyai file-file tersebut bisa dapatkan filenya di Bootstrap.
Struktur dalam file tersebut seperti gambar dibawah ini.

Navbar - Bootstrap Header Menu Navigation

Setelah semua file disiapkan dan sudah siap untuk dipergunakan, mari kita memulai untuk menerapkan sedikit demi sedikit dari cara
menggunakan framework css Bootstrap. Untuk bentuk teruktur penulisan kodenya seperti dibawah ini.

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!-- begin button for mobile responsive -->
            <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- end button -->
            <!-- begin brand/image for logo -->
            <a href="#" class="navbar-brand">GateCreative</a>
            <!-- end brand/image -->
        </div>

        <!-- begin menu -->
        <div class="navbar-collapse collapse" id="menu">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

*NOTE
Pada tag dengan class navbar-collapse terdapat "id", id ini digunakan untuk memanggil tag button dengan data-target yaitu "#menu". Hal ini berfungsi dan akan terlihat saat di versi mobile.

Hasil dari kode diatas akan nampak seperti gambar dibawah ini. Jika masih menemukan kebingungan, jangan ragu untuk bertanya karena kita disini belajar bersama.