Membuat Menu Navigasi Dengan Bootstrap

Example blog post alt

Bootstrap | 2018-11-29

Menu Navigasi adalah daftar menu yang dibuat berdasarkan halaman statis atau label pada postingan website. Menu-menu ini umumnya terletak di bagian atas (head) atau di bawah. Kesempatan ini kita akan mencoba membuat menu navigasi dengan mengunakan framework bootstrap. Terlebih dahulu siapkan beberapa hal di bawah ini :

1. Bootstrap, unduh di Bootstrap

2. XAMPP

3. Notepad ++

#Step 1

Buat script di bawah ini, kemudian simpan di dalam folder yang telah disediakan di dalam folder htdocs.

<htmL>
<head>
	<title>Bootstrap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<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>
</head>
<body>
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
		<div class="navbar-header">
		  <a class="navbar-brand" href="#">PT. Globe Indonesia</a>
		</div>
		<ul class="nav navbar-nav">
		  <li><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
		  <li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-list-alt"></i> Semua Berita
			<span class="caret"></span></a>
			<ul class="dropdown-menu">
			  <li><a href="#">Teknologi</a></li>
			  <li><a href="#">Olah Raga</a></li>
			  <li><a href="#">Politik</a></li>
			  <li><a href="#">Sepak Bola</a></li>
			  <li><a href="#">Kriminal</a></li>
			</ul>
		  </li>
		  
		  <li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-glass"></i> Kesehatan
			<span class="caret"></span></a>
			<ul class="dropdown-menu">
			  <li><a href="#">Rumah Sakit</a></li>
			  <li><a href="#">Puskesmas</a></li>
			  <li><a href="#">Hidup Sehat</a></li>
			</ul>
		  </li>
		  
		  <li><a href="#"><i class="glyphicon glyphicon-facetime-video"></i> Nonton Video</a></li>
		  
		  <li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-barcode"></i> Otomotif
			<span class="caret"></span></a>
			<ul class="dropdown-menu">
			  <li><a href="#">Honda</a></li>
			  <li><a href="#">Toyota</a></li>
			  <li><a href="#">Mercedes</a></li>
			</ul>
		  </li>
		  
		  <li><a href="#"><i class="glyphicon glyphicon-globe"></i> Panduan Website</a></li>
		  
		  <li><a href="#"><i class="glyphicon glyphicon-phone"></i> Hubungi Kami</a></li>
		  
		</ul>
	  </div>
	</nav>
</body>
</html>

Hasil dari script di atas adalah sebagai berikut :

Selamat Mencoba !!

 

 

Download Aplikasi