Pelajari cara membuat bar navigasi dengan link navigasi dengan lebar yang sama.
Section Artikel [hide]
Menu dengan Lebar Sama
Contoh:
HTML
xxxxxxxxxx55
1
2
<html>3
<meta name="viewport" content="width=device-width, initial-scale=1">4
<style>5
* {box-sizing: border-box}6
body {font-family: Arial, Helvetica, sans-serif;}7
8
.navbar {9
width: 100%;10
background-color: #555;11
overflow: auto;12
}13
14
.navbar a {15
float: left;16
padding: 12px;17
color: white;18
text-decoration: none;19
font-size: 17px;20
width: 25%; /* Four links of equal widths */21
text-align: center;22
}23
24
.navbar a:hover {25
background-color: #000;26
}27
28
.navbar a.active {29
background-color: #4CAF50;30
}31
32
@media screen and (max-width: 500px) {33
.navbar a {34
float: none;35
display: block;36
width: 100%;37
text-align: left;38
}39
}40
</style>41
<body>42
43
<h2>Navbar Responsif dengan Link dan Lebar yang Sama</h2>44
<p>Coba ubah ukuran jendela browser untuk melihat efek responsif.</p>45
46
<div class="navbar">47
<a class="active" href="#">Home</a> 48
<a href="#">Search</a> 49
<a href="#">Contact</a> 50
<a href="#">Login</a>51
</div>52
53
</body>54
</html> 55
Langkah 1) Tambahkan HTML
Contoh:
HTML
xxxxxxxxxx1
<!-- Menu Navigasi -->2
<div class="navbar">3
<a class="active" href="#">Home</a>4
<a href="#">Search</a>5
<a href="#">Contact</a>6
<a href="#">Login</a>7
</div>Langkah 2) Tambahkan CSS
Contoh:
CSS
xxxxxxxxxx37
1
/* Style menu navigasi */2
.navbar {3
width: 100%;4
background-color: #555;5
overflow: auto;6
}7
8
/* Link navigasi */9
.navbar a {10
float: left;11
padding: 12px;12
color: white;13
text-decoration: none;14
font-size: 17px;15
width: 25%; /* Empat link dengan lebar sama. Jika Anda memiliki dua link, gunakan 50%, dan 33,33% untuk tiga link, dll. */16
text-align: center; /* Jika Anda ingin teks berada di tengah */17
}18
19
/* Tambahkan warna background saat mengarahkan mouse */20
.navbar a:hover {21
background-color: #000;22
}23
24
/* Beri Style link current/active */25
.navbar a.active {26
background-color: #4CAF50;27
}28
29
/* Tambahkan responsif - pada layar kurang dari 500px, buat link navigasi muncul di atas satu sama lain, bukan di samping satu sama lain */30
@media screen and (max-width: 500px) {31
.navbar a {32
float: none;33
display: block;34
width: 100%;35
text-align: left; /* Jika Anda ingin teks rata kiri pada layar kecil */36
}37
}Contoh:
HTML
xxxxxxxxxx56
1
2
<html>3
<meta name="viewport" content="width=device-width, initial-scale=1">4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">5
<style>6
* {box-sizing: border-box}7
body {font-family: Arial, Helvetica, sans-serif;}8
9
.navbar {10
width: 100%;11
background-color: #555;12
overflow: auto;13
}14
15
.navbar a {16
float: left;17
padding: 12px;18
color: white;19
text-decoration: none;20
font-size: 17px;21
width: 25%; /* Four links of equal widths */22
text-align: center;23
}24
25
.navbar a:hover {26
background-color: #000;27
}28
29
.navbar a.active {30
background-color: #4CAF50;31
}32
33
@media screen and (max-width: 500px) {34
.navbar a {35
float: none;36
display: block;37
width: 100%;38
text-align: left;39
}40
}41
</style>42
<body>43
44
<h2>Navbar Responsif dengan link dengan Lebar yang Sama</h2>45
<p>Coba ubah ukuran jendela browser untuk melihat efek responsif.</p>46
47
<div class="navbar">48
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 49
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 50
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 51
<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>52
</div>53
54
</body>55
</html> 56
