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. 
Membuat Menu Dengan CSS - Dunia Proramming
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. 

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 :

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>

Contoh Script Pemakaian Elemen nav: 

Script HTML
<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>

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

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


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.

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>

Dan  Script CSS yang harus kalian gabungkan yaitu :

Script CSS
#simple li.active {
    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>

Gabungkan Script CSS dibawah ini : 

Script CSS
#inline { 
    margin: 15px auto; 
    padding: 0; } 
#inline li { 
    display: inline;
    margin-left: 15px; 
    margin-right: 15px; 
}

Copy Pastekan Script di atas dan lihat hasilnya.

Sayangnya, pembuatan menu seperti ini memiliki sedikit kekurangan, 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. 

Script HTML : 

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>

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

Jika ada kesalahan dalam penulisan script, kalian dapat meninggalkan komentar dibawah artikel ini, atau juga bisa kalian mengirimkan pesan melalui Email yang sudah tersedia dengan menekan tombol Contact pada bagian bawah blog Dunia Programming.

Sekian Tutorial yang saya buat, semoga artikel ini bermanfaat bagi kalian, Tetap semangat belajar. Terimakasih.

Belum ada Komentar untuk "Cara Membuat Menu Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel