Saya kembali lagi....
Disini saya akan share cara membuat navigasi bar, dimana navigasi bar adalah salah satu element pada HTML. Biasanya navigasi bar digunakan sebagai menu yang berisi link yang bersifat umum pada suatu website. Seperti home, about, menu, post, dan lain lain yang biasanya terletak pada header maupun footer pada sebuah website.
Navbar ada dua bentuk yang biasa digunakan yaitu navbar yang sederhana dan navbar dropdown menu. Dan disini saya akan membagi cara membuat navbar yang sederhana.....so lets check it out!!!...
1. Buat Design
Langkah pertama adalah kita harus menentukan design dan link-link atau menu pada navbar yang nantinya akan memudahkan kita dalam membuat coding seperti contoh gambar berikut ini....
2. Buat Script
Langkah selanjutnya adalah kita buat script pada tag atau code <body> Seperti contoh script di bawah ini.
<body><nav class="navbar"><div class="navbar-left"><div class="logo"></div></div><div class="navbar-right"><ul><li><a href="#">Home</a></li><li><a href="#">Menu</a></li><li><a href="#">Post</a></li><li><a href="#">Kontak Us</a></li></ul></body>
Pada tulisan Home, Menu, Post, dan Kontak Us sesuaikan dengan menu yang diinginkan. Yang nantinya di dalam code <ul>......</ul> dapat diganti dengan halaman yang diinginkan ketika di klik.
3. Buat Script CSS
Langkah selanjutnya kita buat script css di dalam tag <body> dengan tag <style type="text/css">...............</style> seperti contoh script di bawah ini.
<style type="text/css">
.logo{
background-image:url(https://blogger.googleusercontent.com/.png);
width: 40px;
margin: 4 px 14px;
height: 40px;
background-size: 40px 40px;
border: solid 2px #444;
background-color: #444;
}
.navbar-left{
float:left;
padding-left: 15px;
}
.navbar-right{
float: right;
width: 500px;
padding-right: 5px;
}
.navbar{
width: auto;
height: 50px;
background: #444;
}
.navbar ul{
float: left;
margin: 0;
padding: 0;
}
.navbar li{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.navbar li a, .navbar li a:link{
float: left;
padding: 17px 12px;
color: #fff;
text-decoration: none;
position: relative;
font-family: sans-serif;
font-size: 14px;
}
.navbar li a:hover{
background: #ddd;
color: #444;
}
.navbar li li a, .navbar li li a:link{
text-decoration: none;
font-size: 16px;
background: #444;
color: #fff;
width: 108px;
padding: 0px 0px 0 12px;
font-size: 12px;
line-height: 35px;
}
.navbar li li a:hover{
background: #ddd;
color: #444;
}
.navbar li ul{
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
margin-top: 50px;
border: 1px solid #666;
}
</Style>
- Pada tag .logo{.....} bisa diganti dengan logo yang diinginkan dengan mengcopy url gambar
- Pada tag .navbar-left{....} digunakan untuk mengatur posisi padding logo di sebelah kiri
- Pada tag .navbar-right{....} digunakan untuk mengatur posisi padding link-navbar di sebelah kanan
- Pada tag .navbar{....} digunakan untuk membuat background dan tata letak navbar
- Pada tag .navbar ul{....} digunakan untuk mengatur jarak antar menu di navbar
- Pada tag .navbar li{....} digunakan untuk membuat menu navbar menjadi satu baris horizontal
- Pada tag .navbar li ul{....} digunakan untuk mengatur posisi navbar dengan lembar website
- Pada tag .navbar li a, navbar li a:link{....} digunakan untuk mengatur warna, ukuran, tipe font link navbar
- Pada tag .navbar li a:hover{....} digunakan untuk mengatur warna background dan font link navbar ketika di klik
Berikut adalah tampilan dari contoh script di atas.
