Pasti kalian pernah kan melihat sebuah aplikasi misal nya aplikasi seperti Youtube dan di aplikasi tersebut terdapat sebuah tombol-tombol ya berbaris di bawah aplikasi?. Misal nya tombol Home, Trending, Download dan dll. Ya benar, itu adalah sebuah Navbar.
Navbar adalah kependekan dari Navigation Bar atau artinya adalah sebuah kumpulan menu-menu untuk mengarahkan kita ke suatu halaman. Fungsi Navbar ini merupakan komponen yang sangat wajib dipakai saat membuat website maupun aplikasi.
Terus bagaimana jika sebuah website atau aplikasi namun tidak ada Navbar atau navigasi menu? pasti semua pengguna (user) merasa bingung dan ogah mengunjungi website atau aplikasi tersebut.
Artikel kali ini kita akan belajar untuk cara membuat Navbar Fixed Bottom atau Navbar di bawah persis seperti aplikasi mobile pada umum nya. Navbar ini bisa ditampilkan di atas atau di bawah, Namun kali ini kita akan membuat nya ditampilkan di bawah.
Alat-alat yang dibutuhkan :
- Browser
- Text Editor (Sublime Text 3 atau VS Code)
Pertama-tama silahkan buat file dengan nama index.html.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Navbar Fixed Bottom</title>
<!-- Ico Font -->
<link rel="stylesheet" href="https://allyoucan.cloud/cdn/icofont/1.0.1/icofont.css">
</head>
<body>
<div class="nav">
<a data-scroll href="#home">
<span class="icon">
<i class="icofont-home icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Home</small>
</a>
<a data-scroll href="#tentang">
<span class="icon">
<i class="icofont-attachment icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Tentang</small>
</a>
<a data-scroll href="#edukasi">
<span class="icon">
<i class="icofont-graduate icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Resume</small>
</a>
<a data-scroll href="#project">
<span class="icon">
<i class="icofont-tasks icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Project</small>
</a>
<a data-scroll href="#kontak">
<span class="icon">
<i class="icofont-pencil icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Kontak</small>
</a>
</div>
</body>
</html>.nav {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #eee;
display: none;
}
.nav a {
display: inline-block;
text-align: center;
margin: 0px auto;
color: #000;
text-align: center;
padding: 14px 62px;
text-decoration: none;
font-size: 15px;
}
.icofont-sz{
font-size: 1.5rem;
}
@media only screen and (max-width: 600px) {
.nav {
box-shadow: 0 -6px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 2px solid #3273dc;
}
.nav a {
display: inline-block;
text-align: center;
margin: 0px auto;
color: #000;
text-align: center;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Navbar Fixed Bottom</title>
<!-- Icofont -->
<link rel="stylesheet" href="https://allyoucan.cloud/cdn/icofont/1.0.1/icofont.css">
<style type="text/css">
.nav {
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #eee;
display: none;
}
.nav a {
display: inline-block;
text-align: center;
margin: 0px auto;
color: #000;
text-align: center;
padding: 14px 62px;
text-decoration: none;
font-size: 15px;
}
.icofont-sz{
font-size: 1.5rem;
}
@media only screen and (max-width: 600px) {
.nav {
box-shadow: 0 -6px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
overflow: hidden;
background-color: #fff;
position: fixed;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top: 2px solid #3273dc;
}
.nav a {
display: inline-block;
text-align: center;
margin: 0px auto;
color: #000;
text-align: center;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
}
}
</style>
</head>
<body>
<div class="nav">
<a data-scroll href="#home">
<span class="icon">
<i class="icofont-home icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Home</small>
</a>
<a data-scroll href="#tentang">
<span class="icon">
<i class="icofont-attachment icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Tentang</small>
</a>
<a data-scroll href="#edukasi">
<span class="icon">
<i class="icofont-graduate icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Resume</small>
</a>
<a data-scroll href="#project">
<span class="icon">
<i class="icofont-tasks icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Project</small>
</a>
<a data-scroll href="#kontak">
<span class="icon">
<i class="icofont-pencil icofont-sz has-text-grey"></i>
</span><br>
<small class="has-text-grey">Kontak</small>
</a>
</div>
</body>
</html>
Selamat, kalian sudah belajar tentang cara bagaimana membuat navbar fixed bottom seperti aplikasi mobile. Sekarang, silahkan kreasikan sendiri style masing-masing sesuai selera kalian.
Posting Komentar
Posting Komentar