Membuat menu navbar dengan full bootstrap
Oke,balik lagi dengan saya ya di blog NETSECID,pada kali ini saya akan membagikan materi tentang bagaimana caranya membuat menu navbar dengan full bootstrapp ya.
Langsung mulai aja!
Cara membuatnya sangat mudah. Kita tidak perlu lagi membuat cssnya karena semua sudah dibuat oleh bootstrap, kita hanya perlu memasukkan librari css dari bootstrap. Berikut macam-macam navbar namun sebelum membuat contoh dibawah ini sobat perlu memasukkan kode css dan javascript terlebih dahulu pada tag <head>. Kodenya adalah sebagai berikut
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
Pastikan project sobat sudah tersedia semua plugin css dan js diatas karena jika tidak ada salah satu maka akan menyebabkan tidak berjalannya navbar seperti pada contoh ini. Karena untuk kepentingan demo jadi saya menggunakan css dan js online namun jika sobat ingin membuatnya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau bisa sobat download bersama project pada postingan ini di akhir postingan. Untuk warnanya adalah warna standar bawaan dari bootstrap bisa sobat ganti sesuai keinginan sobat.
1. Brand Website
Pada contoh pertama kita akan membahas tentang brand dari suatu website yang bisa sebuah gambar/logo, tulisan atau logo dan tulisan. Contoh penggunaannya adalah sebagai berikut
<!-- As a link -->
<nav class="navbar navbar-light bg-success mb-3">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- Just an image -->
<nav class="navbar navbar-light bg-danger mb-3">
<a class="navbar-brand" href="#">
<img src="logo.png" width="60" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-info mb-3">
<a class="navbar-brand" href="#">
<img src="logo.png" width="60" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Kode diatas akan menghasilkan tampilan warna hijau
2. Standar Navbar
Jika kita menggunakan navbar bawaan bootstrap ini sudah otomatis responsive design jadi kita tidak perlu repot-repot untuk membuat tampilan di segala gadget yang digunakan. Contoh penggunaannya adalah sebagai berikut
<nav class="navbar navbar-expand-lg navbar-light bg-success mb-3">
<a class="navbar-brand" href="#">NETSECID | DEWA KOMPUTER</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab akan menjadi warna hijau
3. Navbar Align Right
Untuk contoh diatas, menu-menunya ada di sebelah kiri. Namun kita bisa juga membuatnya di sebelah kanan yaitu seperti berikut
<nav class="navbar navbar-expand-lg navbar-light bg-primary mb-3">
<a class="navbar-brand" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Akan menghasilkan warna biru
4. Navbar dengan Dropdownlink
Kita juga bisa menambahkan dropdownlink pada navbar yang menamdakan sub menu dari menu yang ada. Contoh penggunaannya adalah sebagai berikut
<nav class="navbar navbar-expand-lg navbar-light bg-warning mb-3">
<a class="navbar-brand" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Akan menghasilkan warna kuning
5. Navbar dengan tambahan teks
Kita juga bisa menggabungkan dengan elemen html lainnya seperti teks pada navbar. Contohnya yaitu
<nav class="navbar navbar-expand-lg navbar-light bg-danger">
<a class="navbar-brand text-white" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text text-white">
Navbar text with an inline element
</span>
</div>
</nav>
Akan menghasilkan warna merah!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
Pastikan project sobat sudah tersedia semua plugin css dan js diatas karena jika tidak ada salah satu maka akan menyebabkan tidak berjalannya navbar seperti pada contoh ini. Karena untuk kepentingan demo jadi saya menggunakan css dan js online namun jika sobat ingin membuatnya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau bisa sobat download bersama project pada postingan ini di akhir postingan. Untuk warnanya adalah warna standar bawaan dari bootstrap bisa sobat ganti sesuai keinginan sobat.
1. Brand Website
Pada contoh pertama kita akan membahas tentang brand dari suatu website yang bisa sebuah gambar/logo, tulisan atau logo dan tulisan. Contoh penggunaannya adalah sebagai berikut
<!-- As a link -->
<nav class="navbar navbar-light bg-success mb-3">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- Just an image -->
<nav class="navbar navbar-light bg-danger mb-3">
<a class="navbar-brand" href="#">
<img src="logo.png" width="60" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-info mb-3">
<a class="navbar-brand" href="#">
<img src="logo.png" width="60" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Kode diatas akan menghasilkan tampilan warna hijau
2. Standar Navbar
Jika kita menggunakan navbar bawaan bootstrap ini sudah otomatis responsive design jadi kita tidak perlu repot-repot untuk membuat tampilan di segala gadget yang digunakan. Contoh penggunaannya adalah sebagai berikut
<nav class="navbar navbar-expand-lg navbar-light bg-success mb-3">
<a class="navbar-brand" href="#">NETSECID | DEWA KOMPUTER</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Hasilnya jika dibuka menggunakan smartphone seperti hp/tab akan menjadi warna hijau
3. Navbar Align Right
Untuk contoh diatas, menu-menunya ada di sebelah kiri. Namun kita bisa juga membuatnya di sebelah kanan yaitu seperti berikut
<nav class="navbar navbar-expand-lg navbar-light bg-primary mb-3">
<a class="navbar-brand" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Akan menghasilkan warna biru
4. Navbar dengan Dropdownlink
Kita juga bisa menambahkan dropdownlink pada navbar yang menamdakan sub menu dari menu yang ada. Contoh penggunaannya adalah sebagai berikut
<nav class="navbar navbar-expand-lg navbar-light bg-warning mb-3">
<a class="navbar-brand" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Akan menghasilkan warna kuning
5. Navbar dengan tambahan teks
Kita juga bisa menggabungkan dengan elemen html lainnya seperti teks pada navbar. Contohnya yaitu
<nav class="navbar navbar-expand-lg navbar-light bg-danger">
<a class="navbar-brand text-white" href="#">Dewan Komputer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text text-white">
Navbar text with an inline element
</span>
</div>
</nav>
Akan menghasilkan warna merah!
Cukup sekian dari saya,semoga bermanfaat!sampai jumpa lagi di materi selanjutnya :)
Belum ada Komentar untuk "Membuat menu navbar dengan full bootstrap"
Posting Komentar