Setelah lama dibuat bingung gimana cara membuat menu drop down vertikal akhirnya ketemu solusi mudah. Caranya dengan membelajari kode html dari hasil yang disajikan dari site purecssmenu.com.
Dan, apa yang saya pelajari akan disampaikan secara bertahap sebagaimana saya mempelajarinya.
Menambah item baru Sistem Transaksi
Dikarenakan sistem transaksi memerlukan lebar kolom yang lebih besar maka perlu diubah pula ukurannya. Ganti lebar awal
menjadi
Setelah itu, jangan lupa tambahkan item baru "Sistem Transaksi" dari yang sebelumnya
menjadi
Nantinya akan berubah seperti di pada gambar di samping. Jadi penambahan Menu tinggal menaruh kode di bawah menu sebelumnya (yang dicetak tebal)
menjadi seperti ini
Mudah bukan? Untuk warna, font, serta luasan silahkan pelajari sendiri yak. Tinggal ubah aja jenis font, colour, dan widhtnya sesuai dengan kebutuhan sampeyan.Nah, kalau sempat akan saya jabarkan untuk case dua colom item.
- Tahap 1. Permulaan mencoba membuat 1 item
- Tahap 2 Membuat 2 Item
- Tahap 3 Membuat 1 item submenus
- Tahap 4 Membuat 2 subitem menus
- Tahap 5 Membuat 1 sub dari subitem menus
- Tahap 6 Membuat 2 sub dari subitem menus
Tahap 1. Permulaan mencoba membuat 1 Menu
Parameter yang digunakan- Font
- Tahoma
- 11 px
- Colour
- Font
- Normal : 305429
- Hover : FFFFFF
- Background
- Normal : 91FF09
- Hover : 47723F
- Item : Product
<style> #pcm{display:none;} ul.pureCssMenu ul{display:none} ul.pureCssMenu li:hover>ul{display:block} ul.pureCssMenu ul{position: absolute;left:98%;top:-1px;} ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.pureCssMenu,ul.pureCssMenu ul { margin:0px; list-style:none; padding:0px 1px 1px 0px; background-color:#308321; background-repeat:repeat; border-color:; border-width:0px; border-style:solid; } ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { display:block; zoom:1; _width:68.25px; float: left; } ul.pureCssMenu ul{ width:0px; } ul.pureCssMenu li{ display:block; margin:1px 0px 0px 1px; font-size:0px; } ul.pureCssMenu a:active, ul.pureCssMenu a:focus { outline-style:none; } ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover { display:block; vertical-align:middle; zoom:1; background-color:#91FF09; border-width:0px; border-color:#E4E1DE; border-style:solid; text-align:left; text-decoration:none; padding:4px; _padding-left:0; font:normal 11px Tahoma; color: #305429; text-decoration:none; cursor:default; } ul.pureCssMenu span{ overflow:hidden; } ul.pureCssMenu ul li { float:none; } ul.pureCssMenu ul a { text-align:left; white-space:nowrap; } ul.pureCssMenu li.sep{ text-align:left; padding:0px; line-height:0; } ul.pureCssMenu li.sep span{ float:none; padding-right:0; width:100%; height:3; display:inline-block; background-color:; background-image:none;} ul.pureCssMenu li:hover{ position:relative; } ul.pureCssMenu li:hover>a{ background-color:#47723F; border-color:#FFFFFF; border-style:solid; font:normal 11px Tahoma; color: #FFFFFF; text-decoration:none; } ul.pureCssMenu li a:hover{ position:relative; background-color:#47723F; border-color:#FFFFFF; border-style:solid; font:normal 11px Tahoma; color: #FFFFFF; text-decoration:none; } ul.pureCssMenu li.dis a { color: #AAAAAA !important; } ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px; height:24px; } ul.pureCssMenu ul img {width:16px; height:16px; } ul.pureCssMenu img.over{display:none} ul.pureCssMenu li.dis a:hover img.over{display:none !important} ul.pureCssMenu li.dis a:hover img.def {display:inline !important} ul.pureCssMenu li:hover > a img.def {display:none} ul.pureCssMenu li:hover > a img.over {display:inline} ul.pureCssMenu a:hover img.over{display:inline} ul.pureCssMenu a:hover img.def{display:none} ul.pureCssMenu span{ display:block; background-image:url(./images/arrow_sub5.gif); background-position:right center; background-repeat: no-repeat; padding-right:12px;} ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrow_main4.gif); } ul.pureCssMenu a:hover span{ _background-image:url(./images/arrow_main4.gif)} ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)} ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arrow_main4.gif);}
</style> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li> </ul>
Menambah item baru Sistem Transaksi
Dikarenakan sistem transaksi memerlukan lebar kolom yang lebih besar maka perlu diubah pula ukurannya. Ganti lebar awal
} ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { display:block; zoom:1; _width:68.25px; float: left; }
menjadi
} ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { display:block; zoom:1; _width:105px; float: left; }
Setelah itu, jangan lupa tambahkan item baru "Sistem Transaksi" dari yang sebelumnya
<!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li> </ul>
menjadi
<!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Sistem Transaksi</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU -->
Menambahkan Link Pada Menu / Item
Untuk menambahkan link pada item tinggal menaruhkan kode link pada kode link item (#) yang sebelumnya kayak gini :<!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Sistem Transaksi</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU -->
menjadi seperti ini
<!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://masteronlinestore.blogspot.com/2011/02/sistem-trasaksi.html" target="_blank">Sistem Transaksi</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU -->
Mudah bukan? Untuk warna, font, serta luasan silahkan pelajari sendiri yak. Tinggal ubah aja jenis font, colour, dan widhtnya sesuai dengan kebutuhan sampeyan.Nah, kalau sempat akan saya jabarkan untuk case dua colom item.
Tidak ada komentar:
Posting Komentar