Pada kesempatan kali ini saya akan membahas tutorial bagaimana memasukkan gambar / icon pada navbar (Navigasi bar,Menu) dengan menggunakan bootstrap.
1. Latar Belakang
Menu atau navbar merupakan bagian yang sangat penting yang terdapat link-link didalamnya. yang berada pada kawasan header suatu aplikasi / website atau program lainnya. jika tidak ada navbar maka keefisienan aplikasi atau program tersebut sangat diragukan. untuk memperindah dan memperjelas navbar setiap developer memiliki kreatifitas masing-masing contoh dapat diberi logo atau gambar.
2. Maksud tujuan
Mempraktekan bagaimana cara membuat navbar sehingga terdapat gambar atau logo/ikon didalamnya.
3. Alat dan Bahan
- Materi artikel bahan pembelajaran pada w3shools
Sebelum mempraktekan bagaimana cara membuat navbar yang dimaksud, sebelumnya saya akan membahas dulu apa itu navbar .
Apa Itu Navbar (Navigasi bar)..?
Navbar merupakan kependekan dari Navigation Bar, yaitu suatu bar panjang berbentuk frame yang berisi berbagai menu navigasi yang memiliki fungsi-fungsi tertentu atau link-link yang menunjukan ke halaman lain.
5. Langkah Kerja
1. Buat satu halaman contoh : navbar.html
<!DOCTYPE html>Hasil :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet href="css/bootstrap.min.css">
<link rel=stylesheet href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src-fluid-fluid="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>S-DULE</title>
</head>
<body>
<nav class="navbar navbar-fixed-top" style="background-color: #ee7614;">
<div class="container-fluid " style="position: absolute;">
<ul class="nav navbar-nav">
<li><img class="image" border="0" src="image/dule.png" width="42px" style="margin: 1px;padding: 0px color:white;">S-dule</li>
</ul></b>
</div>
</nav>
</body>
</html>
Kesimpulannya adalah navbar merupakan bagian dari aplikasi atau program yang berisi berbagai menu navigasi yang memiliki fungsi-fungsi tertentu atau link-link yang menunjukan ke halaman lain.
7. Referensi
- https://www.google.co.id/search?q=navbar+adalah&oq=navbar+a&gs_l=serp.3.1.0l10.744903.747350.0.749591.9.9.0.0.0.0.226.1198.0j3j3.6.0....0...1c.1.64.serp..3.6.1191.0..35i39k1j0i67k1j0i131k1j0i20k1.C0MJUARX5Q0
- https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Sekian Terimkasih
Wassalamualaikum wr.wb
EmoticonEmoticon