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.

Cara Membuat Bottom Navbar Dengan HTML dan CSS

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.

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.

Deklarasikan Tag HTML

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.

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. 

Koneksikan File 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>.

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>

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;
    }

}


Lihat Hasilnya

Setelah berhasil menambahkan styling untuk bottom navbarnya, kamu bisa melihat hasil bottom navbarnya. Berikut tampilan bottom navbar yang saya buat sebelumnya.

Bottom Navbar Responsive Dekstop
Versi Desktop

Bottom Navbar Responsive Mobile
Versi Mobile


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.

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.

Belum ada Komentar untuk "Cara Membuat Bottom Navbar Dengan HTML dan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel