Scribd
Unggah
48 tayangan4 halaman

Bilah Menu Navigasi Responsif Dalam CSS HTML

Menu navigasi responsif dapat dibuat hanya menggunakan HTML dan CSS. Bilah menu akan ditampilkan secara horizontal di PC tetapi secara vertikal di perangkat seluler. CSS media query digunakan untuk menyesuaikan tampilan bilah menu pada berbagai ukuran layar.

Diunggah oleh

Rohmad Kadarwanto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai TXT, PDF, TXT atau baca online di Scribd
48 tayangan4 halaman

Bilah Menu Navigasi Responsif Dalam CSS HTML

Menu navigasi responsif dapat dibuat hanya menggunakan HTML dan CSS. Bilah menu akan ditampilkan secara horizontal di PC tetapi secara vertikal di perangkat seluler. CSS media query digunakan untuk menyesuaikan tampilan bilah menu pada berbagai ukuran layar.

Diunggah oleh

Rohmad Kadarwanto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai TXT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Menu Navigasi Responsif dalam CSS HTML

Hai teman-teman, hari ini di blog ini Anda akan belajar cara membuat Bilah Menu
Navigasi Sepenuhnya Responsif hanya dengan menggunakan HTML & CSS. Di blog
sebelumnya saya sudah share cara membuat Menu Responsive Sidebar menggunakan HTML &
CSS dan sekarang saatnya membuat Navigation Bar di HTML.

Seperti yang Anda ketahui, Menu Bar atau Navigation Bar (Navbar) penting untuk
semua jenis situs web. Banyak situs web memiliki navbar responsif atau navbar
responsif dengan menu tarik-turun. Pada dasarnya, desain responsif adalah cara
untuk menyatukan situs web sehingga secara otomatis menskalakan konten dan
elemennya agar sesuai dengan ukuran layar tempat situs itu dilihat. Itu membuat
gambar tidak lebih besar dari lebar layar dan mencegah pengunjung dari perangkat
seluler perlu melakukan pekerjaan ekstra untuk membaca konten Anda.

Dalam desain kami (Bar Navigasi Responsif), seperti yang Anda lihat pada gambar
pratinjau, ada bilah navigasi horizontal atau bilah navigasi dengan logo di sisi
kiri dan beberapa tautan navigasi di sisi kanan. Ini adalah bilah navigasi yang
sangat sederhana dan dibuat hanya menggunakan HTML & CSS.

Bagian terbaik tentang bilah navigasi ini adalah, bilah navigasi ini sepenuhnya
responsif untuk semua jenis perangkat termasuk ponsel. Di pc, bilah navigasi ini
ditampilkan dalam garis horizontal tetapi di perangkat seluler, bilah navigasi atau
bilah navigasi ini ditampilkan dalam garis vertikal. Di ponsel, Anda memiliki opsi
untuk menampilkan atau menyembunyikan bilah menu dengan mengeklik ikon menu
hamburger.

<h2>Video tutorial Menu Navigasi Responsif</h2>

Dalam tutorial video, Anda telah melihat ini adalah bilah navigasi responsif CSS
murni dan saya telah menggunakan properti CSS @media untuk membuat bilah navigasi
ini sepenuhnya responsif untuk perangkat seluler. Jika Anda menyukai bilah navigasi
responsif ini dan ingin mendapatkan kode sumber program ini, Anda dapat dengan
mudah menyalin kode tutorial ini dari kotak salin yang diberikan atau Anda juga
dapat mengunduh file kode bilah menu navigasi ini.

Jika Anda seorang pemula dan Anda tahu sedikit tentang HTML & CSS maka kode dan
konsep bilah menu navigasi responsif ini pasti akan membantu Anda untuk lebih
memahami HTML & CSS. Ini adalah bilah navigasi responsif yang sangat sederhana
dengan sedikit kode dan bersih.

<h2>
Menu Navigasi Responsif [Kode Sumber]
</h2>
Untuk membuat bilah navigasi responsif ini. Pertama, Anda perlu membuat dua File
satu File HTML dan satu lagi adalah File CSS. Setelah membuat file-file ini cukup
tempel kode berikut ke dalam file Anda. Anda juga dapat mengunduh file kode sumber
bilah menu navigasi responsif ini dari tombol unduh di bawah ini.

Pertama, buat file HTML dengan nama index.html dan tempel kode yang diberikan di
file HTML Anda. Ingat, Anda harus membuat file dengan ekstensi .html.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Navbar | CodingNepal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">DesignX</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<section></section>
</body>
</html>

Kedua, buat file CSS dengan nama style.css dan tempel kode yang diberikan di file
CSS Anda. Ingat, Anda harus membuat file dengan ekstensi .css.

*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
background: #0082e6;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}

Itu saja, sekarang Anda telah berhasil membuat Bilah Menu Navigasi Responsif
menggunakan HTML & CSS. Jika kode Anda tidak berfungsi atau Anda menghadapi
kesalahan/masalah, silakan unduh file kode sumber dari tombol unduh yang diberikan.
Ini gratis dan file .zip akan diunduh kemudian Anda harus mengekstraknya.

Anda mungkin juga menyukai