<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* 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;
}
</style>
</head>
<body>
<h2>Icon Bar Horizontal</h2>
<div class="icon-bar horizontal">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
</body>
</html>
Icon Bar Vertikal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* 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;
}
</style>
</head>
<body>
<div class="icon-bar vertical">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
</body>
</html>
Dalam contoh di atas, HTML digabungkan dengan CSS di dalam satu dokumen. Icon bar horizontal dan vertikal ditampilkan secara terpisah dengan menggunakan kelas “horizontal” dan “vertical” pada tag div yang sesuai. CSS diberikan di dalam tag <style> untuk memperindah tampilan icon bar sesuai dengan tata letak yang dipilih.
Kesimpulan
Demikianlah tutorial singkat tentang cara membuat icon bar dalam desain web. Dengan mengikuti langkah-langkah di atas, Sobat Code dapat dengan mudah membuat icon bar yang menarik dan fungsional untuk meningkatkan navigasi dan pengalaman pengguna pada situs web. Jangan ragu untuk bereksperimen dengan berbagai gaya dan efek untuk menciptakan icon bar yang sesuai dengan kebutuhan dan gaya desain situs web Sobat Code!
