Cara Membuat Bottom Navbar Dengan HTML dan CSS
Cara membuat bottom navbar dengan html dan css bisa kamu temukan di infokuy.
Pembuatan bottom navbar sangat mudah untuk kamu ikuti disini, pastikan kamu mengikuti artikel ini sampai akhir.
Oh iya, navbar bottom yang saya buat sudah responsive untuk semua device.
Sebelumnya, saya sudah membagikan cara membuat navbar responsive dengan html,css dan javascript. Kali ini, saya akan membuat navbar bottom dengan html dan css.
Penggunaan bottom navbar memang sedang trend untuk design website modern terutama untuk versi mobilenya.
Agar kamu bisa mengikuti trend design saat ini, pembuatan bottom navbar ini wajib kamu ikuti.
Memang tampilan bottom navbar yang saya buat biasa - biasa saja. Namun, saya fokus ke cara pembuatan bottom navbar yang responsive.
Daripada penasaran, langsung aja kuy masuk ke pembuatan bottom navbar dengan html dan css versi infokuy.
Persiapan Untuk Membuat Bottom Navbar
Sebelum mulai membuat bottom navbarnya, ada beberapa persiapan yang harus kamu lakukan, diantaranya berikut ini :
- Siapkan Text Editor (Saya sendiri menggunakan Sublime Text)
- Siapakan Browser (Saya menyarankan Chrome atau Firefox)
- Buat folder project dengan nama navbar-responsive / bebas
- Buat file HTML dengan nama file index.html atau sesuai keinginan kamu
- Buat file CSS dengan nama file style.css atau sesuai keinginan kamu
Jika semua persiapan sudah dilakukan, kamu bisa mengikuti langkah selanjutnya.
Baca Juga : Cara Membuat Form Login Menarik Dengan HTML & CSS
Cara Membuat Bottom Navbar
Sudah siap ? Kamu bisa mengikuti pembuatan bottom navbar responsive dibawah ini, saya pastikan pembuatan bottom navbar ini sangat mudah untuk kamu ikuti. Langsung aja kuy, ikuti pembuatan bottom navbar dibawah ini.
Deklarasikan Tag HTML
Setelah kamu menyiapkan semua keperluan untuk membuat bottom navbarnya, silahkan deklarasikan tag HTML dengan menekan tombol ! kemudian tekan tombol TAB. Untuk lebih jelasnya, bisa kamu lihat gambar dibawah ini.
Cara ini bisa kamu lakukan ketika kamu sudah menginstall package Emmet di Sublime Text dan Extensions Elm Emmet di Visual Studio Code. Untuk text editor lainnya, kamu bisa mencari cara untuk menggunakan plugin Emmet.
Baca Juga : Cara Membuat Card Responsive Dengan HTML & CSS
Koneksikan File CSS
Setelah berhasil membuat Tag HTML secara otomatis, langkah selanjutnya kamu bisa menghubungkan file CSS ke file index.html. Saya sendiri membuat file cssnya dengan nama style.css.
Kemudian tuliskan tag <link rel="stylesheet" href="style.css"> atau menyesuikan dengan nama file css kamu dibagian hrefnya. Pastikan kamu menyimpan file koneksi css tersebut di dalam tag <head>.
Baca Juga : Cara Membuat Web Responsive Dengan HTML dan CSS
Buat Kerangka Bottom Navbar
Setelah semua file terhubung, langkah selanjutnya kamu bisa membuat kerangka bottom navbar. Silahkan copy tag html dibawah ini dan simpan di dalam tag <body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<a href="">
<h2>Infokuy</h2>
</a>
</div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem recusandae laborum dolorem, vitae ipsum labore, saepe dicta, adipisci ipsa perspiciatis alias cupiditate in! Voluptatum, fugit at illum, delectus magnam aliquid nisi facere nemo praesentium aliquam, perferendis. Vel, accusamus! Natus nam eaque obcaecati sunt commodi quae hic reiciendis, voluptates ipsa alias nemo voluptatibus. Numquam, quaerat, voluptatem provident nesciunt dolor amet, porro optio quos nihil hic placeat, et velit. Repellendus earum labore praesentium fugiat ea voluptas quos voluptatibus est, reiciendis debitis, hic porro possimus et. Voluptatum delectus reiciendis vel alias. Suscipit impedit eos quidem excepturi veritatis fuga tenetur, optio ipsa accusantium! Odit?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem recusandae laborum dolorem, vitae ipsum labore, saepe dicta, adipisci ipsa perspiciatis alias cupiditate in! Voluptatum, fugit at illum, delectus magnam aliquid nisi facere nemo praesentium aliquam, perferendis. Vel, accusamus! Natus nam eaque obcaecati sunt commodi quae hic reiciendis, voluptates ipsa alias nemo voluptatibus. Numquam, quaerat, voluptatem provident nesciunt dolor amet, porro optio quos nihil hic placeat, et velit. Repellendus earum labore praesentium fugiat ea voluptas quos voluptatibus est, reiciendis debitis, hic porro possimus et. Voluptatum delectus reiciendis vel alias. Suscipit impedit eos quidem excepturi veritatis fuga tenetur, optio ipsa accusantium! Odit?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem recusandae laborum dolorem, vitae ipsum labore, saepe dicta, adipisci ipsa perspiciatis alias cupiditate in! Voluptatum, fugit at illum, delectus magnam aliquid nisi facere nemo praesentium aliquam, perferendis. Vel, accusamus! Natus nam eaque obcaecati sunt commodi quae hic reiciendis, voluptates ipsa alias nemo voluptatibus. Numquam, quaerat, voluptatem provident nesciunt dolor amet, porro optio quos nihil hic placeat, et velit. Repellendus earum labore praesentium fugiat ea voluptas quos voluptatibus est, reiciendis debitis, hic porro possimus et. Voluptatum delectus reiciendis vel alias. Suscipit impedit eos quidem excepturi veritatis fuga tenetur, optio ipsa accusantium! Odit?
</p>
</main>
<div class="bottom-nav">
<div class="bottom-link-nav">
<a href="">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
</a>
<a href="">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
</a>
<a href="">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
</a>
<a href="">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
</a>
<a href="">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
</a>
</div>
</div>
</body>
</html>Baca Juga : 10 Hosting Web Statis Terbaik dan Gratis
Menambahkan Styling Untuk Bottom Navbar
Agar tampilan bottom navbarnya terlihat lebih bagus dan responsive, kamu bisa menambahkan styling untuk bottom navbar.
Design bottom navbar saya memang terlihat simple, saya sengaja membuat bottom navbar yang simple dan fokus ke pembuatan bottom navbarnya saja.
* {
padding: 0px;
margin: 0px;
list-style: none;
quotes: none;
text-decoration: unset;
outline: none;
border: none;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
position: relative;
background-color: #fff;
overflow-x: hidden;
margin: 0px auto;
}
nav {
padding: 10px 20px;
}
nav .brand a{
color: black;
}
main {
padding: 10px 10px 70px;
position: relative;
}
main p {
padding: 5px 0;
}
.bottom-nav {
padding: 10px;
background-color: #2A6FFC;
position: fixed;
width: 100%;
bottom: 0;
}
.bottom-link-nav {
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom-nav a {
color: white;
cursor: pointer;
}
.bottom-nav a svg {
width: 30px;
}
.bottom-nav a:nth-child(3) {
transform: scale(1.5) translateY(-10px);
background-color: white;
border-radius: 1000px;
width: 30px;
height: 30px;
border: 2px solid #2A6FFC;
color: #2A6FFC;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 760px) {
.bottom-nav {
width: 100%;
bottom: 0%;
left: 50%;
display: flex;
justify-content: space-around;
align-items: center;
-webkit-transform: translate(-50%,0%);
-moz-transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
-o-transform: translate(-50%,0%);
transform: translate(-50%,0%);
}
.bottom-link-nav {
position: relative;
width: 450px;
}
}
Baca Juga : Cara Hosting Ke Netlify, Gak Pake Lama
Lihat Hasilnya
Setelah berhasil menambahkan styling untuk bottom navbarnya, kamu bisa melihat hasil bottom navbarnya. Berikut tampilan bottom navbar yang saya buat sebelumnya.
Penutup
Berikut pembahasan mengenai cara membuat bottom navbar dengan html dan css versi infokuy.
Bagaimana menurut kamu artikel mengenai bottom navbar diatas, apakah mudah untuk kamu ikuti ? Silahkan berikan tanggapannya di kolom komentar jika kamu kurang mengerti.
Baca Juga : Cara Membuat Navbar Responsive Dengan HTML, CSS dan Javascript
Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar CSS hanya di infokuy.
Restu Kersana
Calon Jenazah, pengen hidup enak tapi gini - gini aja.
Permisi mas mau tanya? caranya ngasih tulisan biar bisa di bawah iconnya itu gimana ya?
bikin div dulu, terus masukkin script icon + textnya. Yang div nya kasih styling display : flex sama flex-direction: column
bisa gk mas kita buat seperti ini di wordpress tapi tanpa plugin
Mas sekalian kasih tutor action pada button nya mas...
Bagaimana cara membuat efek, modal popup. saat tombol botomnya di klik gan