Tutorial Cara Mudah Pasang Menu Dropdown Di Blog Dengan CSS- - -Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam, CSS bukan merupakan bahasa pemograman.
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>
<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>
Langkah Kedua :
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
Terimakasih anda telah membaca artikel tentang Tutorial Cara Mudah Pasang Menu Dropdown Di Blog Dengan CSS. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link http://mulyatutorial.blogspot.com/2013/11/tutorial-cara-mudah-pasang-menu-dropdown-pada-blog.html. Terimakasih atas perhatiannya.
