Berikut adalah tutorial cara membuat dan mendesain menu horisontal menggunakan CSS:
Langkah 1: Membuat HTML Markup Buatlah struktur HTML untuk menu horisontal Anda.
Anda bisa menggunakan daftar (list) HTML untuk membuat menu dengan menggunakan elemen <ul> dan <li>. Berikut adalah contoh markup untuk menu horisontal:
<nav>
<ul class="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
Langkah 2: Menambahkan CSS Tambahkan CSS untuk mendesain tampilan menu horisontal Anda.
Anda bisa menggunakan CSS untuk mengatur posisi, tata letak, warna, dan gaya lainnya sesuai dengan kebutuhan Anda. Berikut adalah contoh CSS untuk membuat menu horisontal:
/* Reset gaya default dari ul */
.menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #eeeeee;
}
/* Tampilan menu horisontal */
.menu li {
display: inline-block;
}
/* Tampilan link dalam menu */
.menu li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #000;
}
/* Efek hover pada link */
.menu li a:hover {
background-color: #f8f8f8;
}
/* Menyembunyikan tanda baca dalam link */
.menu li a::after {
content: "";
display: block;
height: 2px;
background-color: #000;
opacity: 0;
transition: opacity 0.3s;
}
/* Efek hover pada tanda baca */
.menu li a:hover::after {
opacity: 1;
}
Langkah 3: Mengatur Tata Letak Anda bisa menggunakan CSS untuk mengatur tata letak dari menu horisontal Anda.
Misalnya, Anda bisa menggunakan properti float untuk mengatur posisi menu ke kiri atau ke kanan, atau menggunakan properti margin atau padding untuk mengatur jarak antara menu dan konten lainnya. Berikut adalah contoh CSS untuk mengatur tata letak menu horisontal:
/* Mengatur tata letak menu horisontal ke kanan */
.menu {
float: right;
}
/* Mengatur jarak antara menu dan konten */
.container {
margin-top: 20px;
}
Langkah 4: Menambahkan Responsifitas Jika Anda ingin membuat menu horisontal Anda responsif.
Anda bisa menggunakan media query CSS untuk mengatur tampilan menu pada perangkat dengan lebar layar yang lebih kecil. Berikut adalah contoh CSS untuk membuat menu horisontal responsif:
/* Tampilan menu horisontal pada perangkat dengan lebar layar kurang dari 768px */
@media (max-width: 768px) {
.menu {
float: none;
text-align: center;
}
.menu li {
display: block;
}
}
Hasilnya seperti dibawah ini
.
.
.
Itulah tutorial cara membuat dan mendesain menu horisontal menggunakan CSS. Anda bisa menyesuaikan kode CSS sesuai dengan kebutuhan desain.
.
.
#Seri Belajar CSS:
- Pengenalan Dasar CSS Untuk Pemula
- Dasar Properties dan Selector pada CSS
- Font text pada CSS
- Menerapkan Google Font
- Memahami Inheritance (Pewarisan)
- Memahami Konsep Box Model CSS (Content, Margin, Padding)
- Memahami Box Sizing
- Memahami Property Display
- Bekerja dengan "text-decoration" & "vertical align"
- Styling Anchor Tags (Link)
- Menambahkan PseudoClasses
- Perbedaan Class dan ID
- Tutorial Cara Mendesain Button Menggunakan CSS
- Tutorial CSS Cara Membuat Menu Horisontal
- CSS Browser Support
- CSS Masa Lalu, Hari Ini dan Masa Depan
