Sudahkah Anda mengetahui apa itu navbar? Navbar atau navigasi bar merupakan salah satu elemen pada HTML yang dibuat untuk mempresentasikan link navigasi. Biasanya navbar digunakan sebagai menu yang berisi link-link dan bersifat umum pada suatu website, seperti Home, About, Contact Us, dan lain sebagainya.
Nah, lewat kesempatan ini ToffeeDev ingin memberikan penjelasan lebih lengkapnya seputar navbar atau navigasi bar pada tampilan website. Simak terus artikelnya!
Daftar Isi
ToggleApa Itu Navbar?
Navigasi bar atau navbar adalah nama yang disematkan untuk mendefinisikan sistem navigasi yang dikumpulkan pada satu bagian pada tampilan website. Definisi tersebut kemudian tentu saja sama dengan tujuan yang dimiliki oleh navbar itu sendiri yakni membantu user dalam menemukan laman-laman yang mereka ingin akses.
Sebab, NavBar pada dasarnya berisikan menu yang mencakup informasi umum sejenis dengan menggunakan mekanisme laman, label, category ataupun tag. Informasi tersebut kemudian menampilkan kumpulan (list) informasi dan laman khusus dari website tersebut.
Navbar menjadi satu dari sekian banyak elemen user interface dan user experience yang penting untuk diperhatikan. Sebab dengan tampilan yang menarik dan pengoperasian yang mudah, setiap pengunjung bisa betah berada di dalam website. Hal ini tentunya juga bisa berdampak pada beragam hal yang bisa membantu bisnis.
Baca Juga: Breadcrumbs Adalah Cara Meningkatkan Navigasi Website
3 Cara Membuat Navbar
Bagaimana cara membuat navbar? Tentu saja dapat dengan mudah Anda lakukan! Ikuti langkah-langkah di bawah ini dengan seksama, ya.
1. Siapkan Folder
Langkah pertama, Anda dapat membuat folder penampung, gambar logo, file html dan css. Usahakan logo Anda telah memiliki format svg atau png yang tidak memiliki background. Selanjutnya logo tersebut dimasukkan ke dalam folder image. Sedangkan file index.html dan style.css silakan dibuat dalam folder navbar.
2. Buatlah Coding di index.html
Selanjutnya Anda dapat membuat coding pada file index.html. File index.html adalah file yang nantinya akan dibuka pada browser. Dengan file ini juga Anda dapat membuat struktur html yang akan ditampilkan pada web browser.
Untuk mempercepat codingan sebaiknya gunakan text editor terbaik. Seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor lainnya
3. Membuat File CSS
1. Mengimport Google Font
Jika ingin menggunakan font yang bagus, maka Anda dapat mengambil font dari Google. Silakan perhatikan code berikut untuk mengambil font Montserrat dari Google.
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat&display=swap’);
2. Mengatur Background
Selanjutnya, untuk mengatur background pada navbar pada browser, Anda dapat menggunakan css berikut ini.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #0522b5;
}
3. Mengatur tag li, a dan button
Sedangkan ketika Anda ingin juga mengatur jenis, warna, ukuran font pada tag li, a dan button silakan buat codingan seperti ini.
li, a, button{
font-family: “Montserrat”, sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
Baca Juga: 4 Cara Optimasi SEO untuk Website
4. Pengaturan Header
Setelah menyelesaikan tahap di atas, kini saatnya Anda mengatur header dengan metode flex. Hal inilah yang dapat menjadikan navbar yang Anda buat akan semakin terlihat keren. Berikut ini caranya.
header{
display: flex;
justify-content: space-between;
/* justify-content: flex-end; */
align-items: center;
padding: 30px 10%;
}
Pada pengaturan justify-content space-between maka navbar akan berada pada sisi kanan maupun kiri. Sedangkan apabila Anda mengaktifkan flex-end, maka navbar akan cenderung berada pada sebelah kanan saja. Sesuaikan saja dengan keinginan Anda!
5. Posisi Logo
Posisi logo juga dapat Anda atur sesuai dengan keinginan Anda. Untuk melakukannya lihat pada codingan berikut ini.
.logo{
cursor: pointer;
margin-right: auto;
}
6. Mengatur Interaksi NavLink
Selain itu, mari beralih pada navlink yang juga harus diatur sedemikian rupa agar ketika ada interaksi dapat memberikan efek yang keren. Kemudian, navlink yang sudah berhasil dibuat juga harus diatur ulang agar berjajar seperti yang diinginkan. Untuk mengatur navlink, Anda dapat melihat code-code berikut ini.
.nav__links{
list-style: none;
}
.nav__links li{
display: inline-block;
padding: 0px 20px;
}
.nav__links li a{
transition: all 0.3s ease 0s;
}
.nav__links li a:hover{
color: #0088a9;
Baca Juga: 5 Contoh Landing Page yang Menarik
7. Interaksi Button
Selain komponen navlink, Anda juga telah membuat satu buah button. Untuk mengatur button yang telah Anda buat di html, berikut ini adalah contoh codingan untuk mengatur tombol (button) dengan menggunakan css.
button{
padding: 9px 25px;
background-color: rgba(0,136,169,1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,0.8);
}
Demikian penjelasan terkait pengertian navbar atau navigasi bar pada website dan juga bagaimana cara membuatnya. Tentunya setelah membaca artikel dari ToffeeDev ini, Anda dapat mencoba membuat navbar pada website milik Anda menjadi lebih keren.
Ingin membuat website untuk pertama kalinya namun takut mengalami kesulitan? Tenang, hal tersebut tidak perlu Anda ambil pusing, serahkan semua pada ahlinya. ToffeeDev siap membantu Anda mendapatkan website idaman yang bisa membantu bisnis untuk terus berkembang.
Mulai dari jasa pembuatan website, layanan SEO, hingga digital ads dan sebagainya. Untuk mendapatkan informasi lebih lengkapnya, jangan ragu untuk hubungi tim ToffeeDev sekarang juga ya!