Konten [Tampil]
Halo sobat kembali lagi di Codingin Aja di tutorial kali ini kita akan membuat Navbar yang responsive dengan menggunakan HTML dan CSS tanpa menggunakan javascript seperti gambar di atas.
Kalian pasti sudah pernah melihat navbar pada website yang pernah kalian kunjungi. Biasanya untuk para pengguna handphone navbar bisanya di lambangkan dengan icon garis 3, dan ketika di tekan baru muncul menu.
Navbar responsive bisanya di buat dengan menggunakan javascript namun kali ini kita akan membuat hanya dengan HTML dan CSS.
langsung saja ke tutorialnya.
Buat File HTML Dan CSS
Pertama buatlah file HTML dan juga CSS lalu beri nama terserah kalian jika sudah membuat file lalu isikan kode berikut di file HTML kalian.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="logo">Codingin Aja</div>
<input type="checkbox" id="check">
<label for="check"><div class="burger-menu"><i class="fa fa-bars"></i></div></label>
<div class="nav-menu">
<div class="nav-link"><a href="#">Home</a></div>
<div class="nav-link"><a href="#">About</a></div>
<div class="nav-link"><a href="#">Feature</a></div>
<div class="nav-link"><a href="#">contact</a></div>
</div>
</nav>
</header>
</body>
</html>
kemudian tambahkan code css berikut di file CSS kalian
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-color: rgb(71, 71, 71);
}
header{
width: 100%;
background-color: rgb(23, 21, 21);
padding: 0 60px;
}
nav{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo{
font-size: 20px;
color: white;
font-weight: 700;
}
input[type="checkbox"]{
display: none;
}
.burger-menu{
color: white;
width: 30px;
height: 30px;
line-height: 30px;
display: none;
}
.nav-menu{
display: flex;
align-items: center;
justify-content: center;
}
.nav-link{
padding: 20px 25px;
transition: all .5s;
}
.nav-link a{
color: white;
text-decoration: none;
font-size: 20px;
font-weight: 700;
}
.nav-link:hover{
background-color: white;
}
.nav-link:hover a{
color: black;
}
@media(max-width:700px){
header{
padding: 0;
padding-top: 20px;
}
.logo{
margin-left: 20px;
margin-bottom: 15px;
}
.burger-menu{
display: block;
margin-right: 20px;
margin-bottom: 15px;
} .nav-menu{
display: none;
margin-top: 10px;
flex-direction: column;
width: 100%;
background-color: rgb(30, 30, 30);
height: 100vh;
}
.nav-link{
width: 100%;
text-align: center;
}
input[type="checkbox"]:checked ~ .nav-menu{
display: block;
}
}
penjelasan
code di bawah ini adalah code untuk menempatkan logo kalian. Kalian
dapat mengubah tulisan Codingin Aja dengan logo kalian.
<div class="logo">Codingin Aja</div>
<input type="checkbox" id="check">
<label for="check"><div class="burger-menu"><i class="fa fa-bars"></i></div></label>
<div class="nav-menu">
<div class="nav-link"><a href="#">Home</a></div>
<div class="nav-link"><a href="#">About</a></div>
<div class="nav-link"><a href="#">Feature</a></div>
<div class="nav-link"><a href="#">contact</a></div>
</div>
@media(max-width:700px){
header{
padding: 0;
padding-top: 20px;
}
.logo{
margin-left: 20px;
margin-bottom: 15px;
}
.burger-menu{
display: block;
margin-right: 20px;
margin-bottom: 15px;
} .nav-menu{
display: none;
margin-top: 10px;
flex-direction: column;
width: 100%;
background-color: rgb(30, 30, 30);
height: 100vh;
}
.nav-link{
width: 100%;
text-align: center;
}
input[type="checkbox"]:checked ~ .nav-menu{
display: block;
}
}
input[type="checkbox"]:checked ~ .nav-menu{
display: block;
}
Itulah sedikit tutorial tentang cara membuat navbar dengan HTML dan CSS. Terus ikuti artikel kami dan jangan lupa share ke media sosial kalian.
0 Komentar