Halo semuanya, datang lagi di mandankoding.com sekarang kita akan belajar tentang Cara Membuat Navbar Responsive Dengan HTML Dan CSS, sebelumnya kita sudah berbagi tentang Membuat Generator Gradien Warna Acak HTML, CSS & Javascript.
Kamu mungkin pernah melihat Navigasi Bar di banyak situs web. Umumnya, navigasi Bar adalah elemen user interface (UI) di dalam sebuah halaman web yang memiliki menu tautan ke bagian lain dari situs web. Navigasi Bar adalah elemen UI penting yang harus ada pada situs web.
Saya di sini menggunakan properti CSS @media untuk membuat navbar ini responsive untuk semua perangkat. Kamu dapat menonton video tutorial lengkap pada program ini (Desain Navbar Responsif).
Cara Membuat Navbar Responsive Dengan HTML Dan CSS
Untuk membuat program ini (Cara Membuat Navbar Responsive Dengan HTML Dan CSS). Pertama, Kamu perlu membuat dua File. Satu File HTML dan satu lagi adalah File CSS. Setelah membuat file-file ini cukup salin kode berikut di file Kamu, selain itu kamu juga menyiapkan satu gambar sebagai background nantinya yang berukuran 1920 x 1280 atau kamu sesuaikan saja, seperti gambar di bawah ini.
Catatan: untuk file jquery.js download di sini.
Tutorial Kami Lainnya:
- Apa itu Selektor Class dalam CSS? Ini Penjelasannya
- Kupas Tuntas Memahami Penggunaan Selektor ID dalam CSS
- Cara Mengaktifkan Copy Paste di Commad Prompt Windows 10
- Perbedaan antara DELETE dan TRUNCATE di SQL
- Pengertian DDL, DML, DCL Mysql dan Contohnya
Pertama, buat file HTML dengan nama index.html dan salin kode pada file HTML kamu. Ingat, kamu harus membuat file dengan ekstensi .html
<!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>Navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<script src="jquery.js"></script>
</head>
<body>
<header>
<div class="logo">MANDAN KODING</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" >About</a></li>
<li><a href="#service" class="active">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</header>
<script>
$(document).ready(function () {
$(".menu-toggle").click(function () {
$('nav').toggleClass('active');
})
})
</script>
</body>
</html>Kedua, buat file CSS dengan nama style.css dan salin kode pada file CSS kamu. Ingat, kamu harus membuat file dengan ekstensi .css.
body {
margin: 0;
padding: 0;
background: url(1.jpg);
font-family: sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
header {
position: absolute;
background: #ffffff;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
}
header .logo {
color: rgb(83, 83, 83);
height: 60px;
line-height: 60px;
font-size: 24px;
float: left;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
list-style: none;
}
header nav ul li a {
color: rgb(83, 83, 83);
height: 60px;
line-height: 60px;
padding: 0 20px;
text-decoration: none;
display: block;
}
header nav ul li a:hover,
header nav ul li a.active {
color: #ffffff;
background-color: #aaaaaa;
}
.menu-toggle {
color: rgb(94, 94, 94);
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
/* responsive */
@media (max-width: 650px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background: #333;
top: 50px;
left: -100%;
transition: 0.5s all;
}
header nav.active {
left: 0;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul li a {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
color: rgb(255, 255, 255);
}
}Itu saja, sekarang kamu telah berhasil membuat Desain Navbar Responsive Dengan HTML Dan CSS hanya dengan menggunakan HTML & CSS. Jika kode kamu tidak berfungsi atau Anda menghadapi masalah, silakan beri komentar.
Selamat mencoba🎉🎉
Jadi maksudnya mesti memulai karangka baru, dalam artian haru buat tempate sendiri gitu ya??
kurang lebih seperti itu mas.