CSS HTML Membuat Navigation Bar Menggunakan HTML dan CSS – Pada artikel ini kita akan belajar untuk membuat navigation bar menggunakan HTML dan CSS. Kalian hanya perlu menyiapkan file index.html dan style.css. Selain itu, kita akan menggunakan fontawesome icon untuk membuat icon yang terdapat pada setiap menu yang ada di navigation bar. Simak kode dibawah ini untuk mengetahui cara membuat navigation bar menggunakan HTML dan CSS.
Kode CSSBerikut ini kode css untuk membuat navigation bar menggunakan HTML dan CSS. *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 330px; height: 70px; background: #0159ab; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -1px 4px rgba(0,0,0,.2); overflow: hidden; border-radius: 30px; } ul{ list-style: none; height: 100%; display: flex; align-items: center; justify-content: space-around; } li{ display: block; width: calc(330px/4); height: 70px; text-align: center; line-height: 70px; } .fa{ font-size: 1.3rem; transition: .5s; color: #fff } span{ display: block; font-size: .8rem; color: #fff; transform:translateY(-20px); transition: .5s cubic-bezier(.75,-1,0,1.15); } li:hover .fa{ transform: translateY(-100px); } li:hover span{ transform: translateY(-70px); } .text-owner{ position: absolute; top: 42%; left: 45%; } Kode HTMLBerikut ini kode html untuk membuat navigation bar menggunakan HTML dan CSS dan dijalankan pada browser pada perangkat komputer atau laptop yang anda gunakan. <!DOCTYPE html> <html> <head> <TITLE>Navigation Bar</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="https://kit.fontawesome.com/e25b852c87.js" crossorigin="anonymous"></script> </head> <body> <div class="text-owner"> Created by Inpows.com </div> <div class="container"> <ul> <li> <i class="fa fa-home" aria-hidden="true"></i> <span>Home</span> </li> <li> <i class="fa fa-search" aria-hidden="true"></i> <span>Search</span> </li> <li> <i class="fa fa-comments" aria-hidden="true"></i> <span>Discussions</span> </li> <li> <i class="fa fa-user" aria-hidden="true"></i> <span>Account</span> </li> </ul> </div> </body> </html> Hasil yang diperolehBerikut ini hasil yang dapat kalian peroleh saat dijalankan pada browser yang digunakan. https://www.inpows.com/media/2020/12/Membuat-Navigation-Bar-Menggunakan-HTML-dan-CSS-Inpows.mp4 Gimana? Apakah berhasil kalian jalankan? Terlepas dari UX yang masih kurang menurut saya, saya pikir navigation bar yang telah dibuat ini memiliki desain yang keren dan simpel. Temukan source code menarik lainnya hanya di Inpows. Baca juga: 1. Membuat Cloud Menggunakan HTML dan CSS 2. Membuat Pola Bintang Bentuk Huruf X Menggunakan Python 3. Eksplorasi Kotlin Annotations 4. Membuat Text Editor Seperti Notepad di Python 5. Membuat Masking Angka Digit Terakhir Menggunakan Kotlin Demo: Bar NavigasiBar navigasiMemiliki navigasi yang mudah digunakan adalah penting untuk setiap situs web. Dengan CSS Anda dapat mengubah menu HTML membosankan menjadi bar navigasi tampan. Navigasi Bar = Daftar LinksSebuah bar navigasi perlu HTML standar sebagai basis. Dalam contoh kita, kita akan membangun navigasi dari daftar HTML standar. Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan <li> elemen masuk akal: Contoh<ul> Cobalah sendiri " Sekarang mari kita menghapus peluru dan margin dan padding dari daftar: Contoh menjelaskan:
Kode dalam contoh di atas adalah kode standar yang digunakan di kedua vertikal, dan horisontal bar navigasi. Vertikal Navigation BarUntuk membangun sebuah bar navigasi vertikal, Anda dapat gaya <a> elemen dalam daftar, selain kode di atas: Contoh menjelaskan:
Anda juga dapat mengatur lebar <ul> , dan menghapus lebar <a> , karena mereka akan mengambil lebar penuh yang tersedia ketika ditampilkan sebagai elemen blok. Ini akan menghasilkan hasil yang sama seperti contoh sebelumnya: Contoh ul { li a { Cobalah sendiri " Vertikal Navigation Bar ContohBuat navigasi bar vertikal dasar dengan warna latar belakang abu-abu dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di atas mereka:
Contoh ul { li a { /* Change the link color on hover */ Cobalah sendiri " Active / Current navigasi LinkTambahkan "aktif" kelas untuk link saat ini untuk membiarkan pengguna mengetahui halaman yang dia / dia di:
Pusat Links & Tambahkan Borders Tambahkan Tambahkan
Contoh ul { li { li:last-child { Cobalah sendiri " Tinggi penuh Tetap Vertikal NavbarBuat tinggi penuh, "sticky" navigasi di sebelah: Contoh ul { Cobalah sendiri " Catatan: Contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile. Horizontal Navigasi BarAda dua cara untuk membuat sebuah bar navigasi horizontal. Menggunakaninline atau mengambangdaftar item. Daftar Produk inlineSalah satu cara untuk membangun sebuah bar navigasi horisontal adalah untuk menentukan <li> elemen sebagai inline, di samping "standard" kode di atas: Contoh menjelaskan:
Mengambang Daftar ProdukCara lain untuk menciptakan sebuah bar navigasi horizontal adalah untuk mengapung <li> elemen, dan menentukan tata letak untuk link navigasi: Contoh li { a { Cobalah sendiri " Contoh menjelaskan:
Tip: Tambahkan background-warna <ul> bukannya setiap <a> elemen jika Anda ingin warna latar belakang full-width: Horizontal Navigasi Bar ContohBuat bar navigasi horisontal dasar dengan warna latar belakang gelap dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di atas mereka:
Contoh ul { li { li a { /* Change the link color to #111 (black) on hover */ Cobalah sendiri " Active / Current navigasi LinkTambahkan "active" kelas untuk link saat ini untuk membiarkan pengguna mengetahui halaman yang dia / dia di:
Link kanan Align Link kanan-align oleh mengambang item daftar ke kanan (
Contoh<ul> Cobalah sendiri " pembagi perbatasan Tambahkan
Contoh /* Add a gray right border to all list items, except the last item (last-child) */ li:last-child { Cobalah sendiri " Tetap Navigation BarMembuat navigasi bar tinggal di bagian atas atau bawah halaman, bahkan ketika pengguna gulungan halaman: Catatan: Contoh-contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile. Gray Horizontal NavbarSebuah contoh dari bar navigasi horisontal abu-abu dengan perbatasan abu-abu tipis:
Contoh ul { li a { Cobalah sendiri " Contoh lebih Topnav responsif
Sidenav responsif dropdown Navbar |