Pelajari cara membuat menu vertikal atau vertical menu dengan CSS.
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .vertical-menu { width: 200px; } .vertical-menu a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-color: #4CAF50; color: white; } </style> </head> <body> <h1>Vertical Menu</h1> <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </body> </html>
Section Artikel
Cara Membuat Grup Tombol Vertikal
Langkah 1) Tambahkan HTML
Contoh:
<div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div>
Langkah 2) Tambahkan CSS
Contoh:
.vertical-menu {
width: 200px; /* Atur lebar jika anda menginginkannya */
}
.vertical-menu a {
background-color: #eee; /* Warna background abu-abu */
color: black; /* Warna teks hitam */
display: block; /* Buat tautan muncul di bawah satu sama lain */
padding: 12px; /* Tambahkan padding */
text-decoration: none; /* Hapus underline dari link */
}
.vertical-menu a:hover {
background-color: #ccc; /* Background abu-abu gelap saat mengarahkan mouse */
}
.vertical-menu a.active {
background-color: #4CAF50; /* Tambahkan warna hijau ke link "active/current" */
color: white;
}Tentukan ketinggian tertentu dan tambahkan properti overflow jika Anda menginginkan menu scroll vertikal.
Contoh:
.vertical-menu {
width: 200px;
height: 150px;
overflow-y: auto;
}