Menu Navigasi Bootstrap
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara Membuat Menu Navigasi menggunakan Bootstrap
A. Pengertian
Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link
yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu
berfungsi sebagai pengarah ke halaman web lain, baik dari web kita
sendiri atau dari web lain.
B. Latar belakang
Latar belakang belajar tentang materi kali ini adalah agar kita bisa membuat menu dengan fitur dropdown
C. Alat dan bahan
- Komputer / Laptop
- Text Editor
- Bootstrap
D. Tujuan
- Menghemat Tempat link pada menu
- Memperbagus Tampilan web
E. Langkah - langkah
- Buat file dengan Nama " Navigasi.html "
- Masukkan script dibawah ini.
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
E. Referensi
Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb