Pada kesempatan kali ini, saya akan memberikan tutorial bagaimana Cara Mudah Membuat Sub Menu Website Cantik Dengan CSS, dalam membuat menu dropdown ini tidak sampai membutuhkan JavaScript/jQuery.
DropDown Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
Cara Mudah Membuat Sub Menu Website Cantik Dengan CSS.
DropDown Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
Oke, langsung saja kita memulai membuat menu dropdown sederhana dengan dimulai mengetikkan skrip/kode HTML dan disusul dengan pembuatan file CSS, lebih jelasnya ikuti langkah-langkah berikut:
Cara Mudah Membuat Sub Menu Website Cantik Dengan CSS.
Membuat menu dropdown: skrip HTML
Kita mulai dengan membuat wrapper(pembungkus) div dan kita akan memberikan class menu-wrap.
Skrip HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<div class="menu-wrap">
</div>
</body>
</html>
Didalam wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar link tersebut kita bungkus dengan tag <ul> dan tag <li>:
Skrip HTML
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
Karena kita akan menggunakan eksternal CSS, maka tambahkan skrip berikut dalam tag head:
Skrip HTML
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Sehingga skrip akhir kita menjadi seperti ini:
Skrip HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Simpan skrip diatas dengan nama “index.html”.
Membuat menu dropdown: skrip CSS
Setelah kita menyelesaikan pembuatan file HTML, selanjutnya dalam membuat menu dropdown kita akan melengkapinya dengan file CSS. Buat file baru dan simpan sebagai “style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
Skrip CSS
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
Dalam skrip CSS diatas fungsi skrip pada baris no 1 adalah untuk mereset padding dan margin default dari browser.
Pada skrip no 4 sampai no 6, kita tentukan warna background dari body dan menentukan warna sekaligus ukuran dari font.
Untuk skrip no 10 sampai no 16, untuk mengatur segala atribut dan nilai dari class menu wrap mulai dari lebar, tinggi dan posisi. Selanjutnya kita menambahkan skrip CSS berikut:
Skrip CSS
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
Pada skrip no 2 diatas berfungsi untuk menghilangkan style bawaan dari tag <ul>.
Skrip no 6 sampai no 12 berfungsi untuk mengatur ukuran, posisi dan merubah tulisan link ke huruf besar.
Skrip no 16 sampai no 17 berfungsi untuk memberikan warna background ketika link di sorot/hover.
Pada skrip no 25 sampai no 31 mengatur agar secara default sub link tidak tampil, karena sub link akan tampil ketika link utama di sorot/hover.
Sehingga skrip CSS akhir kita menjadi seperti ini:
Skrip CSS
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
Simpan dan file tersebut, selanjutnya buka file “index.html” untuk melihat hasil. Demikian tutorial cara membuat menu dropdown sederhana, silahkan berkomentar jika ada hal yang ditanyakan. Menu dropdown diatas bisa digunakan untuk web atau blog, karena pada dasarnya web atau blog menggunakan HTML dan CSS dalam menampilkan data.
Sekian Cara Mudah Membuat Sub Menu Website Cantik Dengan CSS semoga bermanfaat...
Belum ada tanggapan untuk "Cara Mudah Membuat Sub Menu Website Cantik Dengan CSS"
Post a Comment