Cara Membuat Menu Dengan CSS
Hy Sobat Dunia Proramming yang selalui setia mengikuti Artikel Dunia Programming, bertemu lagi dengan saya, dalam Tutorial Cara membuat Menu Dengan CSS. Oke simak baik-baik ya Tutorialnya.
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 mempermudah pengguna atau pengunjung dalam melakukan navigasi pada website kita tentunya kita harus menyediakan menu yang mudah diakses dan dilihat oleh para pengnujung blog atau wbsite kita, dan tentunya tidak membingungkan para pengunjung blog kita.
 |
| Cara Membuat Menu Dengan CSS |
Karena hal tersebut, elemen navigasi merupakan salah satu elemen yang paling penting dan hampir selalu ditemukan dalam sebuah website maupun blog. sayan akan menjelaskan cara pembuatan elemen navigasi dengan menggunakan list.
Baca Terus Tutorianya ya...? Jangan diloncati, karena artikel ini sangat penting dalam pembuatan sebuah menu navigasi pada websitemaupun blog untuk kalian. mari kita mulai.
Elemen Navigasi
HTML menyediakan sebuah elemen untuk menandakan bagian navigasi dari sebuah dokumen, yaitu elemen nav (navigasi). Berdasarkan dokumen spesifikasi HTML5, fungsi utama dari elemen nav yaitu:
Elemen nav merupakan bagian dari halaman yang link ke halaman lain atau ke bagian dalam halaman : bagian dengan link navigasi .
Tidak semua kelompok link pada halaman harus dalam elemen nav hanya bagian yang terdiri dari blok navigasi utama sesuai untuk elemen nav . Secara khusus , itu adalah umum untuk footer untuk memiliki daftar link ke berbagai bagian penting dari sebuah situs , tapi unsur footer lebih tepat dalam kasus tersebut , dan tidak ada unsur nav diperlukan untuk link tersebut.
Tidak semua kelompok link pada halaman harus dalam elemen nav hanya bagian yang terdiri dari blok navigasi utama sesuai untuk elemen nav . Secara khusus , itu adalah umum untuk footer untuk memiliki daftar link ke berbagai bagian penting dari sebuah situs , tapi unsur footer lebih tepat dalam kasus tersebut , dan tidak ada unsur nav diperlukan untuk link tersebut.
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.
Cara Penggabungan Script CSS :
Untuk penggabungan script css, kalian gunakan cara internal, yaitu memasukkan script css kedalam satu file, pada bagian area tag pembuka <head> dan penutup </head> dan teaptnya dibawah tag pembuka dan penutup title, kemudian kalian tambahkan script <style type="text/css"> dan dikahiri dengan </script>, jadi penulisannya akan nampak seperti dibawah ini :
Cara Penggabungan Script CSS :
Untuk penggabungan script css, kalian gunakan cara internal, yaitu memasukkan script css kedalam satu file, pada bagian area tag pembuka <head> dan penutup </head> dan teaptnya dibawah tag pembuka dan penutup title, kemudian kalian tambahkan script <style type="text/css"> dan dikahiri dengan </script>, jadi penulisannya akan nampak seperti dibawah ini :
Script HTML
<html>
<head>
<title>Judul Web Kalian</title>
<style type="text/css">
.
Kode CSS kalian letakkan disini
.
</style>
</head>
<body>
Isi website kalian
</body>
</hml>
<head>
<title>Judul Web Kalian</title>
<style type="text/css">
.
Kode CSS kalian letakkan disini
.
</style>
</head>
<body>
Isi website kalian
</body>
</hml>
Contoh Script Pemakaian Elemen nav:
Script HTML
<nav>
<ul id="main-menu"> ... </ul>
</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 :
Contoh Script :
Script HTML
<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>
<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:
Contoh Script CSS :
Script CSS
#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;
}
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;
}
Copy Pastekan Script diatas dan kalian coba lihat hasilnya.
Tentunya Jika kalian menggunakan hanya script CSS diatas saja, masih belum sempurna atau belum keren, Jika ingin Keren Kalian bisa tambahkan Script CSS dibawah ini :
Script CSS
#simple li:hover {
background: linear-gradient(-45deg, #006cff, #5ca1ff);
}
#simple li a {
color: white;
display: block;
text-decoration: none;
}
background: linear-gradient(-45deg, #006cff, #5ca1ff);
}
#simple li a {
color: white;
display: block;
text-decoration: none;
}
Untuk Artikel Hover Anda bisa pelajari lebih lanjut di sini
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.
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.
Script HTML :
Script HTML
<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>
<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 Script CSS yang harus kalian gabungkan yaitu :
Script CSS
#simple li.active {
background: #FFF;
}
#simple li.active a {
color: #0044a1;
font-weight: bold;
}
background: #FFF;
}
#simple li.active a {
color: #0044a1;
font-weight: bold;
}
Copy Pastekan Script HTML dan CSS diatas, dan lihat hasilnya
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.
Script HTML :
Script HTML
<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>
<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>
Gabungkan Script CSS dibawah ini :
Script CSS
#inline {
margin: 15px auto;
padding: 0; }
#inline li {
display: inline;
margin-left: 15px;
margin-right: 15px;
}
margin: 15px auto;
padding: 0; }
#inline li {
display: inline;
margin-left: 15px;
margin-right: 15px;
}
Copy Pastekan Script di atas dan lihat hasilnya
Script HTML
<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>
<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>
Gabungkan dengan script CSS dibawah ini :
Script CSS
#float {
margin: 15px auto;
padding: 0;
}
#float li {
float: left;
list-style: none;
margin-left: 15px;
margin-right: 15px;
}
margin: 15px auto;
padding: 0;
}
#float li {
float: left;
list-style: none;
margin-left: 15px;
margin-right: 15px;
}
Belum ada Komentar untuk "Cara Membuat Menu Dengan CSS"
Posting Komentar