Cara - Tombol Lainnya di Navbar
Pelajari cara membuat tombol "lainnya".
Tombol "Lainnya" di Navbar
Buat Navbar Dropdown
Buat menu tarik-turun yang muncul saat pengguna menggerakkan mouse ke atas elemen di dalam bilah navigasi.
Langkah 1) Tambahkan HTML:
Contoh
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Contoh Dijelaskan
Gunakan elemen apa saja untuk membuka menu tarik-turun, misalnya elemen <button>, <a> atau <p>.
Gunakan elemen penampung (seperti <div>) untuk membuat menu tarik-turun dan tambahkan tautan tarik-turun di dalamnya.
Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu tarik-turun dengan benar dengan CSS.
Langkah 2) Tambahkan CSS:
Contoh
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Contoh Dijelaskan
Kami telah menata bilah navigasi dan tautan bilah navigasi dengan warna latar, bantalan, dll.
Kami telah menata tombol dropdown dengan warna latar, padding, dll.
Kelas .dropdown
adalah wadah untuk
.dropdown-content
. Karena ini adalah elemen <div>, dan bukan elemen <a>, kita harus mengapungkannya untuk memastikan bahwa itu tetap berada di sebelah tautan.
Kelas .dropdown-content
memegang menu tarik-turun yang sebenarnya. Itu disembunyikan secara default, dan akan ditampilkan saat mengarahkan kursor (lihat di bawah). Perhatikan bahwa min-width
diatur ke 160px. Jangan ragu untuk mengubah ini.
Alih-alih menggunakan batas, kami telah menggunakan box-shadow
properti untuk membuat menu tarik-turun terlihat seperti "kartu". Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lain.
Selector digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse di :hover
atas tombol dropdown.
Halaman Terkait
Tip: Buka Tutorial Dropdown CSS kami untuk mempelajari lebih lanjut tentang dropdown.
Tip: Buka Dropdown yang Dapat Diklik kami untuk mempelajari lebih lanjut tentang dropdown yang dapat diklik
Tip: Buka Tutorial CSS Navbar kami untuk mempelajari lebih lanjut tentang navbars.
Kiat: Buka Navigasi Atas Responsif kami untuk mempelajari tentang cara membuat bilah navigasi responsif.