/* Styling untuk icon bar horizontal */
.icon-bar.horizontal {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar.horizontal a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar.horizontal a:hover {
background-color: #ddd;
color: black;
}
/* Styling untuk icon bar vertikal */
.icon-bar.vertical {
height: 100%;
width: 60px; /* Lebar ikon bar vertikal */
position: fixed;
z-index: 1;
top: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.icon-bar.vertical a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.icon-bar.vertical a:hover {
background-color: #ddd;
color: black;
}
Dalam contoh di atas, kita menggunakan kelas “horizontal” dan “vertical” pada tag div untuk membedakan antara icon bar horizontal dan vertikal. CSS kemudian diberikan untuk masing-masing tata letak, termasuk penyesuaian ukuran, warna, dan efek hover yang berbeda. Dengan menggunakan CSS ini, Sobat Code dapat dengan mudah menyesuaikan tampilan icon bar sesuai dengan kebutuhan desain situs web.
Berikut adalah contoh lengkap HTML dan CSS untuk icon bar horizontal dan vertikal:
Icon Bar Horizontal
