Cara Membuat Navbar dengan Html dan Css

Admin - 16 March 2023

Cara Membuat Navbar dengan Html dan Css - Navbar atau navigation bar adalah bagian penting dari sebuah website yang memberikan navigasi ke halaman-halaman dalam website. Navbar biasanya terletak di bagian atas halaman dan berisi menu atau tautan ke halaman-halaman utama. Di bawah ini adalah langkah-langkah untuk membuat navbar HTML.

Membuat Bagian HTML

Buatlah sebuah dokumen HTML kosong. Anda dapat membuatnya menggunakan teks editor atau aplikasi web development seperti Visual Studio Code.

Di dalam dokumen HTML, buatlah sebuah elemen <nav> yang akan menjadi kontainer untuk navbar.

<!DOCTYPE html>

<html>

<head>

<title>Contoh Navbar</title>

</head>

<body>

<nav>

</nav>

</body>

</html>

Di dalam elemen <nav>, buatlah sebuah elemen <ul> sebagai daftar menu. Elemen <ul> akan berisi beberapa elemen <li> sebagai menu.

<nav>

<ul>

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

<li><a href="#">Tentang Kami</a></li>

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

</ul>

</nav>

Di dalam elemen <li>, tambahkan elemen <a> sebagai tautan menu. Anda dapat mengganti atribut href dengan tautan halaman yang sesuai.

<nav>

<ul>

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

<li><a href="#">Tentang Kami</a></li>

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

</ul>

</nav>

Membuat Bagian CSS

Anda dapat menambahkan CSS untuk mengatur tampilan navbar. Berikut contoh CSS sederhana untuk mengatur navbar menjadi horizontal, menambahkan warna background, dan mengatur tampilan menu.

nav {

background-color: #333;

overflow: hidden;

}

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

display: flex;

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 {

background-color: #ddd;

color: black;

}

Kesimpulan

Dengan menambahkan kode CSS di atas, navbar Anda akan terlihat lebih profesional dan menarik. Anda juga dapat membuat dengan css versi Anda sendiri seunik dan sebagus mungkin.

Sekian tutorial cara membuat navbar HTML. Semoga bermanfaat!

Cara Membuat Navbar dengan Html dan Css