Cara Membuat Navbar pada HTML dan CSS

Cara Membuat Navbar pada HTML dan CSS

Rexusss - Cara Membuat Navbar pada HTML dan CSS

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.
Pembuatan Dropdown Pada Nav Menggunakan CSS

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.

Berikut adalah kode programnya:

HTML

<nav>

    <ul>

        <li><a href="alamatnya">Home</a></li>

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

            <ul>

                <li><a href="alamatnya">Anggota</a></li>

                <li><a href="alamatnya">Buku</a></li>

                <li><a href="alamatnya">Kategori Buku</a></li>

            </ul>

        </li>

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

            <ul>

                <li><a href="alamatnya">Peminjaman</a></li>

                <li><a href="alamatnya">Pengembalian</a></li>

            </ul>

        </li>

        <li><a href="alamatnya" onClick="return confirm ('Yakin?')">Logout</a></li>

    </ul>

</nav>

CSS

* {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;

}

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.