Menu merupakan elemen navigasi penting untuk memudahkan pengguna melakukan navigasi di website. Ada dua jenis menu yang dibahas, yaitu menu vertikal dan horizontal. Menu vertikal dapat dibuat dengan list dan CSS untuk mengatur tampilan. Menu horizontal dapat dibuat dengan mengubah properti display menjadi inline atau menggunakan float untuk lebih mengontrol tampilan.

1. List Sebagai Menu
Mayoritasi dari website yang kita kembangkan merupakan sebuah website yang terdiri dari
banyak halaman, dan seringkali jumlah persis dari halaman web yang akan kita bangun tidak
diketahui (karena bersifat dinamis). Untuk memppermudah pengguna dalam melakukan navigasi
pada website kita tentunya kita harus menyediakan menu yang mudah diakses dan dilihat oleh
pengguna.
Karena hal tersebut, elemen navigasi merupakan salah satu elemen yang paling penting dan
hampir selalu ditemukan dalam sebuah website. Bagian ini akan menjelaskan cara pembuatan
elemen navigasi dengan menggunakan list, serta elemen navigasi yang memberikan makna
semantik dalam dokumen web.
Elemen Navigasi
HTML menyediakan sebuah elemen untuk menandakan bagian navigasi dari sebuah dokumen,
yaitu elemen nav. Berdasarkan dokumen spesifikasi HTML5, fungsi utama dari elemen nav
yaitu:
The nav element represents a section of a page that links to other pages or to parts within the
page: a section with navigation links. Not all groups of links on a page need to be in a nav
element only sections that consist of major navigation blocks are appropriate for the nav element.
In particular, it is common for footers to have a list of links to various key parts of a site, but the
footer element is more appropriate in such cases, and no nav element is necessary for those links.
Seperti yang dapat dilihat, elemen nav digunakan hanya untuk blok navigasi utama, seperti menu
keseluruhan halaman. Menu-menu lain seperti daftar isi atau daftar halaman pada bagian kaki
website tidak perlu dimasukkan ke dalam sebuah nav, meskipun tentunya memasukkan elemenelemen tersebut ke dalam sebuah nav tidaka akn memberikan kerugian apapun.
Contoh pemakaian elemen nav ialah sebagai berikut:
<nav>
<ul id="main-menu">
...
</ul>
</nav>
Elemen nav tidak akan terlihat pada hasil eksekusi dikarenakan elemen ini hanya merupakan
penampung yang memiliki makna semantik, sama seperti header, footer, maupun article.
Menu Vertikal Menggunakan List

2. Sebuah menu dikatakan vertikal jika menu tersebut ditampilkan secara menurun ke bawah. Menu
vertikal sederhana tentunya sangat mudah dibuat dengan menggunakan list, karena sifat dasar
dari list yang memang sudah menurun ke bawah. Misalkan jika kita memiliki list sebagai
berikut:
<ul id="simple">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
Kita dapat mengaplikasikan CSS untuk menggantikan warna latar belakang dari setiap li,
kemudian menghilangkan penanda daftar, memberikan lebar yang sama, dan berbagai
pengukuran lainnya sehingga didapatkan kotak penuh yang menyerupai menu, seperti berikut:
#simple {
margin: 0;
padding: 0;
width: 125px;
}
#simple li {
background: linear-gradient(-45deg, #0044a1, #005ddc);
border-bottom: 1px solid #FFF;
list-style: none;
padding: 0.5em;
text-align: center;
width: 100px;
}
sehingga kita akan mendapatkan tampilan:
Menu Vertikal, Hampir Jadi
Tentunya dapat dilihat dengan jelas bahwa teks dari menu tersebut belum benar-benar selesai,
dan kita perlu menambahkan sedikit kode untuk mengubah teks di dalam menjadi terlihat, tidak
bergaris bawah, serta memenuhi keseluruhan blok. Kodenya adalah sebagai berikut:
#simple li:hover {

3. background: linear-gradient(-45deg, #006cff, #5ca1ff);
}
#simple li a {
color: white;
display: block;
text-decoration: none;
}
sehingga hasil akhir dari menu sederhana ini adalah:
Menu Vertikal (Menu “About” di-hover) | Demo
Perhatikan bahwa pada kode CSS di atas, kita menambahkan properti display: block pada
#simple li a. Hal ini dimaksudkan untuk memastikan pengguna dapat melakukan klik pada
bagian manapun dari menu untuk berpindah tempat. Coba hapus properti ini untuk melihat
efeknya!
Hal lain yang perlu diingat dalam pembuatan menu ialah bahwa kita harus memberitahukan
pengguna dengan mudah di mana ia berada sekarang. Pemberitahuan ini biasanya dilakukan
dengan melakukan sesuatu yang berbeda pada menu yang sedang aktif agar pengguna dapat
melihat dengan jelas keberadaan dirinya. Misalnya, kita dapat mengubah warna latar dan teks
serta menebalkan teks ketika pengguna sedang berada dalam satu halaman. Keberadaan
pengguna dapat ditandai dengan sebuah class baru, yang diberikan secara dinamis sesuai dengan
halamannya.
Kode HTML untuk mendapatkan efek tersebut ialah:
<ul id="simple">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li class="active"><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
dan CSS yang harus ditambahkan:
#simple li.active {
background: #FFF;

4. }
#simple li.active a {
color: #0044a1;
font-weight: bold;
}
sehingga kita bisa mendapatkan hasil:
Menu Vertikal (Menu “Contact” Aktif) | Demo
Menu Horizontal Menggunakan List
Sebuah menu tentunya tidak selalu berbentuk vertikal. Seringkali kita menemukan menu yang
bersifat horizontal pada sebuah website, yang hampir selalu menjadi metode navigasi untuk fiturfitur utama dari sebuah website. Bagaimanakah kita membuat menu horizontal menggunakan
list?
Menu Horizontal dengan Display:Inline
Cara yang paling sederhana untuk membuat menu horizontal dengan menggunakan list ialah
mengubah properti display dari elemen li menjadi bernilai inline. Dengan mengubah properti
ini, elemen li yang awalnya merupakan block level element akan berubah menjadi inline level
element, dan dapat saling tersusun secara horizontal.
Begitu mengubah nilai properti display menjadi inline, penanda daftar akan langsung hilang,
dan setiap elemen dalam daftar akan saling bergabung. Idealnya, kita harus memberikan jarak
secara manual menggunakan padding ataupun margin.
Kode HTML di bawah:
<ul id="inline">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

5. dipadukan dengan CSS berikut:
#inline {
margin: 15px auto;
padding: 0;
}
#inline li {
display: inline;
margin-left: 15px;
margin-right: 15px;
}
akan menghasilkan daftar seperti berikut:
Menu Horizontal Menggunakan Display:Inline | Demo
Sayangnya, pembuatan menu seperti ini memiliki sedikit kekurangna, yaitu kita tidak dapat
sepenuhnya mengontrol margin dan padding dari setiap elemen. Secara standar, browser akan
menambahkan satu spasi diantara setiap elemen li. Untuk menanganinya, kita dapat
menggunakan float.
Menu Horizontal dengan Float
Seperti namanya, menu horizontal dengan float dibuat dengan menggunakan properti float.
Pengunaan float akan memungkinkan kita memiliki kontrol penuh akan penampilan
keseluruhan dari sebuah elemen.
Kode HTML berikut:
<ul id="float">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
dibuat menjadi sebuah menu horizontal dengan menggunakan kode CSS berikut:
#float {
margin: 15px auto;
padding: 0;
}
#float li {
float: left;

6. list-style: none;
margin-left: 15px;
margin-right: 15px;
}
Hasil eksekusi:
Menu Horizontal Menggunakan Float | Demo
dan tentunya kita dapat memodifikasi sedikit kode CSS lagi untuk membuat menu menjadi lebih
indah:
#float li {
background: linear-gradient(#687587, #404853);
float: left;
list-style: none;
padding-bottom: 10px;
padding-top: 10px;
}
#float li a {
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: white;
font-variant: small-caps;
text-decoration: none;
padding: 10px 15px;
}
#float li a:hover {
background: #454d59;
color: #d0d2d5;
}
dengan hasil:
Menu Horizontal Menggunakan Float Full | Demo