CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Namun pada kesempatan kali ini kita akan menggunakan CSS pada tampilan menu dropdown, menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css.
Berikut ini adalah Tutorial Cara Mudah Pasang Menu Dropdown Di Blog Dengan CSS :
Langkah Pertama :
Membuat susunan list menu untuk dropdown dalam html, kodenya berikut ini :
<ul class="dropmenu"> <li><a href="#1">Menu 1</a><ul>Langkah Kedua :
<li><a href="#11">Sub Menu 1</a></li>
<li><a href="#22">Sub Menu 2</a></li>
</ul></li>
<li><a href="#2">Menu 2</a><ul>
<li><a href="#21">Sub Menu 1</a></li>
<li><a href="#22">Sub Menu 2</a></li>
<li><a href="#23">Sub Menu 3</a></li>
<li><a href="#24">Sub Menu 4</a></li>
</ul></li>
<li><a href="#3">Menu 3</a><ul>
<li><a href="#31">Sub Menu 1</a></li>
<li><a href="#32">Sub Menu 2</a></li>
<li><a href="#33">Sub Menu 3</a></li>
<li><a href="#34">Sub Menu 4</a></li>
</ul></li></ul>
Kemudian kita buat kode css berikut, dengan menambahkannya pada bagian <head>.. </head>
<style type="text/css"> .dropmenu { background: #616161; height: 30px; list-style-type: none; margin: 0; padding: 0px; } .dropmenu li { border-right: solid 1px white; float: left; height: 30px; } .dropmenu li a { color: #fff; display: block; font: 12px arial, verdana, sans-serif; font-weight: bold; padding: 9px 20px; text-decoration: none; } .dropmenu li:hover { background: #778899; position: relative; } .dropmenu li:hover a { text-decoration: underline; } .dropmenu li:hover ul { background-color: #3f4a54; border: 1px solid grey; left: 0px; padding: 3px; top: 30px; width: 160px; } .dropmenu li:hover ul li { border: none; height: 18px; } .dropmenu li:hover ul li a { background-color: #778899; border: 1px solid transparent; color: #fff; display: block; font-size: 11px; height: 18px; line-height: 18px; padding: 0px; text-decoration: none; text-indent: 5px; width: 158px; padding: 3px; } .dropmenu li:hover ul li a:hover { background: silver; border: solid 1px #444; color: #000; height: 18px; padding: 3px; } .dropmenu ul { left: -9999px; list-style-type: none; position: absolute; top: -9999px; } </style>Langakah Ketiga :
Penyimpanan, selesai sudah cara membuat menu dropdown, selamat mencoba dan semoga sukses.
Demikianlah yang dapat disampaikan Dunia Komputer dan Internet mengenai Tutorial Cara Mudah Pasang Menu Dropdown Di Blog Dengan CSS, semoga dapat berguna dan bisa menambah ilmu pengetahuan bagi kita semua, baca juga artikel lainya mengenai Tutorial Cara Mudah Membuat SlideShow Pada Blog
Tidak ada komentar:
Posting Komentar