List Sebagai Menu dengan CSS

Posted by Giman on

Thursday, August 27, 2015

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 elemen-elemen 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

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 {
    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;
}

#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 fitur-fitur 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>

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;
    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

Labels: List Sebagai Menu

Thanks for reading List Sebagai Menu dengan CSS. Please share...!