Pada tutorial sebelumnya, kita sudah belajar Cara Membuat Tabel Kwitansi Keren dengan Kode HTML & CSS. Kali ini, kita akan belajar cara membuat menu navigasi di website, tentu saja dengan bantuan CSS.
Menu Navigasi atau sistem navigasi yang berbentuk grafis, membantu pengunjung dalam mengakses informasi di website. Ini adalah elemen UI pada halaman web yang menyertakan tautan ke bagian lain dari web.
Menu navigasi sebagian besar ditampilkan di bagian atas halaman dalam bentuk daftar tautan horizontal. Bisa juga ditempatkan di bawah logo atau header, tapi harus selalu ditempatkan sebelum konten utama halaman web.
Sangat penting bagi web untuk memiliki navigasi yang mudah digunakan. Ini memainkan peran penting dalam situs web karena memungkinkan pengunjung mengunjungi bagian mana pun dengan cepat.
Mari kita bahas Menu navigasi horizontal dan Menu navigasi vertikal secara detail.
Menu Navigasi Horizontal
Menu navigasi horizontal adalah daftar tautan horizontal, yang umumnya berada di bagian atas halaman.
Mari kita lihat cara membuat Menu navigasi horizontal dengan menggunakan sebuah contoh.
Dalam contoh ini, kita akan menambahkan properti overflow:hidden yang mencegah elemen li keluar dari daftar, properti display:block menampilkan tautan sebagai elemen blok dan membuat seluruh area tautan dapat diklik.
Kita juga menambahkan properti float: left, yang menggunakan float untuk membuat elemen blok menggesernya ke samping satu sama lain.
Jika kita menginginkan warna latar belakang lebar penuh maka kita harus menambahkan properti background-color ke <ul> daripada elemen <a>.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</body>
</html>Border Pembatas Antar Menu
Kita dapat menambahkan batas antar link pada menu navigasi dengan menggunakan properti border-right. Contoh berikut menjelaskannya dengan lebih jelas.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</body>
</html> Menu Navigasi Fixed
Saat kita menggulir halaman, menu navigasi tetap tetap berada di bagian bawah atau atas halaman. Lihat contoh yang sama.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: fixed;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Halo Dunia </h1>
<h2 style="padding-bottom: 2000px; text-align: center;"> Gulir ke bawah halaman untuk melihat menu navigasi tetap </h2>
</body>
</html> Menu Navigasi Sticky
Property position: sticky digunakan untuk memposisikan elemen berdasarkan posisi gulir pengguna.
Properti CSS ini memungkinkan elemen untuk menempel ketika gulir mencapai titik tertentu. Bergantung pada posisi gulir, elemen lengket beralih antara properti tetap dan relatif.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: sticky;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h1> Contoh dari sticky menu navigasi</h1>
<ul>
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Halo Dunia </h1>
<h2 style="padding-bottom: 2000px; text-align: center;"> Gulir ke bawah halaman untuk melihat menu sticky navigasi</h2>
</body>
</html>Menu Navigasi Drop Down
Contoh berikut menjelaskan cara membuat menu dropdown di dalam menu navigasi.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover , .dropdown:hover .dropbtn{
background-color: orange;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightblue;
min-width: 160px;
box-shadow: 5px 8px 10px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: gray;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1,h2,h3{
text-align:center;
color: green;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Desain Web </a>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</li>
</ul>
<h1>Selamat datang di Mbah WP </h1>
<h2>Contoh Menu Dropdown Menu di dalam Menu Navigasi </h2>
<h3>Arahkan kursor ke menu “Desain Web”untuk melihat efek dropdown.</h3>
</body>
</html>Menu Navigasi Vertikal
Dalam contoh ini, kita akan melihat cara membuat menu navigasi vertikal.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightblue;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 8px 16px;
text-decoration: none;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h2>Menu Navigasi Vertikal</h2>
<ul>
<li><a href="#" class = "active">Beranda</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
</body>
</html> Kita dapat menyelaraskan tautan ke tengah dan menambahkan batas di antara keduanya. Lihat contoh yang sama.
Dalam contoh ini, kita menambahkan property text-align: center; ke <li> dan <a> untuk memusatkan tautan dan properti border ke <ul> untuk menambahkan batas.
Kita juga akan menambahkan properti border-bottom ke semua elemen <li>.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightblue;
border: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
ul:last-child {
border-bottom: none;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#" class = "active">Beranda</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
</body>
</html> Menu Navbar Vertikal Dengan Tinggi Penuh
Kita juga dapat membuat Menu navigasi samping dengan tinggi penuh tetap dengan menggunakan properti height: 100%; dan position: fixed;
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: lightblue;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href = "#" class = "active">Beranda</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
<div style="margin-left:20%;padding-bottom:2000px;color:blue;">
<h1>Selamat datang di Mbah WP</h1>
<h2>Menu Navigasi Samping dengan height: 100%; dan position: fixed;</h2>
<h3>Scroll halaman, dan lihat bagaimana menu navigasi samping di halaman</h3>
</div>
</body>
</html>Demikian cara membuat menu navigasi di website dengan bantuan CSS, semoga tutorial ini bisa membantu Anda untuk berlatih menggunakan CSS untuk membuat tampilan yang lebih bagus.
