0

0

0

share

#css#css#navbar#navbar
0 Reaksi

0 Komentar

Membuat Navbar pada HTML dan CSS

Profile
Aditya Rahmatullah Pratama•

27 Juli 2016

Membuat Navbar pada HTML dan CSS

Hallo semua, kali ini Kami akan membuat sebuah tutorial untuk membuat navbar sederhana pada HTML dan CSS. Sebelumnya, Kamu harus paham dulu konsep dari HTML itu sendiri. Kamu bisa membaca artikel Konsep Dasar HTML.

HTML memiliki beberapa element, salah satunya yaitu <nav>. Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman utama,gallery dll.

Pada pengetikan sintaks kita dapat menggunakan berbagai macam code editor, misalkan Notepad++ atau Sublime. Pemilihan code editor bisa bebas sesuai dengan yang kita inginkan.

Implementasi

Berikut adalah contoh sederhana penulisan kode HTML untuk navigation bar.

<pre>
	<nav>
	 <a href="/home/">Halaman Utama</a> |
	 <a href="/gallery/">Gallery</a> |
	 <a href="/contact/">Contact Us</a> |
	</nav>
</pre>

Berikut adalah contoh lain dari pembuatan nav pada HTML:

<html>
<head>
	<title>Contoh</title>
</head>
<body>
<nav>
 	<a href="/home/">Halaman Utama</a> |
 	<a href="/gallery/">Gallery</a> |
 	<a href="/contact/">Contact Us</a> |
</nav>

<h1>Ini Body</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat mattis erat, a mattis dui condimentum ut. Nulla vulputate felis sit amet tortor auctor molestie. Vivamus ante felis, ornare at ullamcorper id, feugiat sit amet arcu. Donec eu maximus mi. Donec cursus magna vel felis iaculis, et aliquam est lacinia. Vivamus et cursus magna, eu tempus ex. Mauris vulputate urna lectus, sit amet imperdiet velit facilisis sit amet. In dignissim vitae lorem ut tincidunt. Aliquam sit amet gravida erat. Donec lobortis lectus lectus, a scelerisque magna maximus ut.
Suspendisse quam risus, consequat non nisl nec, condimentum eleifend mauris. Nulla fermentum, mi quis vulputate fringilla, quam lacus eleifend dolor, eget vestibulum lacus nisi ac nunc. Mauris lectus quam, finibus eget ante et, ornare pulvinar tellus. Aenean purus dui, condimentum varius bibendum vitae, molestie et neque. Quisque volutpat nulla quis justo bibendum ullamcorper. In ullamcorper lectus erat, nec interdum justo tristique nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem odio, tempor ut leo at, dignissim luctus mauris. Donec ullamcorper est vitae nisl tempus viverra. Praesent consectetur justo ex, quis laoreet dolor dignissim at. Suspendisse rutrum dapibus ipsum ut consequat. Fusce id varius tellus. Morbi sodales mattis ante, eu egestas dui ullamcorper id. Sed vel ultrices quam. Donec in eros at sapien laoreet iaculis.

<footer>
	<center>
 		Ini footer
 	</center>
</footer>

</body>
</html>

Membuat Navbar dengan menambahkan CSS

Setelah Kita selesai mencoba membuat navbar sederhana, Kita dapat menambahkan CSS untuk membuat navbar lebih bagus dan enak dilihat. Kalian bisa membaca lebih lanjut tentang CSS pada artikel Pengenalan dan Sintaks Dasar CSS.

Berikut Contoh Penggunaan Nav dengan ditambahkan CSS :

Berikut adalah kode untuk menampilkan navbar seperti gambar di atas :

<!DOCTYPE html>
<html>
<head>
	<title>Navbar CSS</title>
	<style>
 	* {
 		margin:0; 
 		padding:0;
 	}
 
	nav {
		margin:auto;
		text-align: center;
		width: 100%;
		font-family: arial;
	} 
	
	nav ul {
		background:#37988e;
		padding: 0 20px;
		list-style: none;
		position: relative;
		display: inline-table;
		width: 100%;
	 }

	nav ul li{
		float:left;
	}

	nav ul li:hover{
		background:#d68d9a;
	}

	nav ul li:hover a{
	 	color:#000;
	}

	nav ul li a{
	 	display: block;
	 	padding: 25px;
	 	color: #fff;
	 	text-decoration: none;
	}
	</style>

</head>
<body>
<nav>
 	<ul>
	 	<li><a href="#">Home</a></li>
	 	<li><a href="#">Gallery</a></li>
	 	<li><a href="#">Contact Us</a></li>
 	</ul>
</nav>
</body>
</html>

Penjelasan

<code>display: block;</code> Digunakan untuk membuat display link menjadi sebuah bentuk.

<code>:hover</code> pada CSS maksudnya adalah action yang kita buat pada selector hover akan berjalan saat cursor kita diarahkan pada object tersebut.

<code>display: inline-table;</code> Berfungsi untuk membuat object sejajar dengan object lainnya.

Pembuatan Dropdown Pada Nav

Setelah membuat navbar yang sederhana, sekarang Kita akan mencoba menambahkan fitur dropdown pada navbar. Dropdown adalah fitur dimana saat Kita menggerakan mouse kepada link nav tersebut, akan muncul daftar - daftar link lain yang terdapat didalam link pertama.

Screenshot_10

Berikut adalah kode programnya:

<html>
	<head>
	<title>Navbar</title>
	<style>
	* {margin:0; padding:0;}
	 
	body {
	 background-color:#fff;
	 font-family:Arial, Helvetica, sans-serif;
	 color:#000;
	}

	nav {
	 margin:auto;
	 text-align: center;
	 width: 100%;
	} 

	nav ul ul {
	 display: none;
	}

	nav ul li:hover > ul{
	display: block;
	width: 150px;
	}

	nav ul {
	 background: #53bd84;
	 padding: 0 20px;
	 list-style: none;
	 position: relative;
	 display: inline-table;
	 width: 100%;
	}

	nav ul:after {
	 content: ""; 
	 clear:both; 
	 display: block;
	}

	nav ul li{
	 float:left;
	}

	nav ul li:hover{
	 background:#666;
	}

	nav ul li:hover a{
	 color:#fff;
	}

	nav ul li a{
	 display: block;
	 padding: 25px;
	 color: #fff;
	 text-decoration: none;
	}

	nav ul ul{
	 background: #53bd84;
	 border-radius: 0px;
	 padding: 0;
	 position: absolute;
	 top:100%;
	}

	nav ul ul li{
	 float:none;
	 border-top: 1px soild #53bd84;
	 border-bottom: 1px solid #53bd84;
	 position: relative;
	}

	nav ul ul li a{
	 padding: 15px 40px;
	 color: #fff;
	}

	nav ul ul li a:hover{
	 background-color: #666;
	}

	nav ul ul ul{
	 position: absolute;
	 left: 100%;
	 top: 0;
	}
	</style>
</head>
<body>
<nav>
	<ul>
	 	<li><a href="#">Home</a></li>
	 	<li><a href="#">Input</a>
		 	<ul>
			 	<li><a href="#">Anggota</a></li>
			 	<li><a href="#">Buku</a></li>
			 	<li><a href="#">Kategori Buku</a></li>
		 	</ul>
 		</li>
 		<li><a href="#">Transaksi</a>
		 	<ul>
			 	<li><a href="#">Peminjaman</a></li>
			 	<li><a href="#">Pengembalian</a></li>
		 	</ul>
		</li>
 		<li><a href="#" onClick="return confirm ('Yakin?')">Logout</a></li>
	</ul>
</nav>
</body>
</html>

Bagaimana Dropdown bisa terjadi ?

Karena saat pertama dijalankan, CSS pada selector nav ul ul ber-display none. Dan pada saat kita hover akan berubah menjadi block. Perubahan tersebut akan memunculkan konten nav ul ul saat kita hover. Dan ditambahkan property-property lain agar rapih.

Demikianlah tutorial yang bisa Kami share kali ini, semoga tutorial kali ini bermanfaat untuk kedepannya. Semoga wawasan kalian tentang HTML dan CSS bertambah. Janganlah berhenti belajar karena hidup tak pernah berhenti mengajarkan.

Sumber : http://www.w3schools.com/tags/tag_nav.asp

0

0

0

share