webdesign dasar : 11 list sebagai menu

186
-1

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
186
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

webdesign dasar : 11 list sebagai menu

  1. 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. 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. 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. 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. 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. 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

×