Bagaimana cara membuat navbar sederhana HTML dan CSS ?

pada tanggal

 NAVBAR SEDERHANA MENGGUNAKAN HMTL DAN CSS





Sebelum masuk ke pembahasan tutorial membuat navbar, kita perlu mengetahui apa yang dimaksud dengan navbar. Navbar itu apa sih? navbar atau navigasi adalah salah satu elemet penting pada sebuah website yang memberikan navigasi ke halaman halaman pada website. Navbar biasanya terletak diatas menu atau halaman utama.

Navbar bisa dibuat dibeberapa aplikasi salah salah satunya adalah Sublime, Visual Studio Code atau Notepad++.

Berikut merupakan langkah-langkah membuat navbar sederhana dengan menggunakan HTML dan CSS :

1. Membuat dokumen HTML kosong.

2. Di dalam dokumen HTML, dalam tag <body> buatlah element <nav> yang nantinya akan menjadi kontrainer untuk navbar. 

3. Di dalam element <nav> buatlah element <ul> sebagai daftar menu. Element <ul> berisi beberapa element <li> sebagai menu dalam navbar.

contoh script :

<nav>

<ul>

<li><a href="#">HOME</a></li>

<li><a href="#">ABOUT</a></li>

<li><a href="#">CONTACT US</a></li>

</ul>

</nav>

Di dalam element <li>, element <a> sebagai tautan menu dalam navbar. Atribut href "#" dapat diisi dengan tautan halaman yang sesuai. 

4. Membuat bagian CSS. Bagian CSS sangat diperlukan untuk mengatur tampilan navbar. 

Contoh script CSS sederhana untuk mengatur navbar menjadi horizontal, mengatur tampilan menu, dam menambahkan warna background.

nav{

background-color: #192e3a;

overflow: hideen;

}


nav ul{

margin: 0;

padding: 0;

display: flex;

list-style-type: none;

background-color: #192e3a;

overflow: hidden;

justify-content: space-between;

}


nav li{

float: left;

}


nav li a{

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}


nav li a: hover{

backgorund-color: #919191;

color: black;

}


NOTE :

a {text-decoration} merupakan CSS pada tulisan di menu navbar.

ul {padding} untuk mengatur jarak antar menu pada navbar.

li {display: inline} untuk membuat menu navbar menjadi horizontal.

li a:hover untuk mengubah warna setiap menu saat mouse diarahkan.


Result :









Komentar

Posting Komentar